Hi I'm trying to utilize the swap easing effect that quicksand plugin offers. The problem is I'm not sure how to do it properly. I have multiple DIV containers, where the first div is set in a fix location, all other divs when clicked are swapped to that location and animated the swapped div to predefined size. What I want to achieve is to get the smooth easing effect upon clicking on the divs and swapping/ animating the objects. This is what i have so far ... any help is most appreciated CSS Part: { border: 0; margin: 0; padding: 0; } body { background: #fff; color: #777; margin: 0 auto; padding: 50px; position: relative; width: 1000px; } h1 { background: inherit; border-bottom: 1px dashed #ccc; color: #933; font: 17px Georgia, serif; margin: 0 0 10px; padding: 0 0 5px; text-align: center; } p { clear: both; font: 10px Verdana, sans-serif; padding: 10px 0; text-align: center; } p a { background: inherit; color: #777; } p a:hover { background: inherit; color: #000; } .hoverbox { cursor: default; list-style: none; } .hoverbox { background: #eee; border-color: #ddd #bbb #aaa #ccc; border-style: solid; border-width: 1px; color: inherit; display: inline; float: left; margin: 7px; padding: 11px; position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; } Code (markup): CODE: <script src="js/jquery.quicksand.js" type="text/javascript"></script> <script src="js/jquery.quicksand.min.js" type="text/javascript"></script> <script src="js/jquery-1.4.3.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('div.hoverbox').click(function () { $(this).insertAfter($('#position h1')); var wasExpanded = $(this).hasClass('expanded'); $('div.expanded').removeClass('expanded'). animate({width: 200, height: 150 }, 'slow'); if (!wasExpanded) { $(this).addClass('expanded'). animate({ width: 439, height: 525 }, 'slow'); $(this).quicksand($('div.hoverbox'),{ duration: 800, easing: 'swing'}); } }); }); </script> </head> <body> <form id="form1" runat="server"> <div id="position"> <h1>Div Gallery</h1> <div class="hoverbox"> 1 </div> <div class="hoverbox"> 2 </div> <div class="hoverbox"> 3 </div> <div class="hoverbox"> 4 </div> <div class="hoverbox"> 5 </div> <div class="hoverbox"> 6 </div> <div class="hoverbox"> 7 </div> <div class="hoverbox"> 8 </div> <div class="hoverbox"> 9 </div> <div class="hoverbox"> 10 </div> </div> </form> </body> </html> Code (markup): Please look at image to get a better understanding
The way your code is represented here is useless - besides, you have loaded the quicksand.js-file twice, both the regular and minified one, and BEFORE you load (an outdated) jquery-file - update the jquery, call on that first, and then call on the minified quicksand-file.