JQuery plugin Quicksand achieves a stunning animation shuffling effect

Quicksand is an ES2en-based plug-in that reorders and filters elements on the page, and has a nice shuffling transition animation that can be used in many projects to enhance the user experience. This article illustrates the use of Quicksand as a practical project application.

XHTML

<div id="nav"> 
  <ul> 
   <li id="all" class="cur"> All functional modules </li> 
   <li id="app"> The application </li> 
   <li id="sys"> System management </li> 
  </ul> 
</div> 
<ul id="list" class="image-grid"> 
  <li id="id-1" class="app"> 
   <img src="images/birth.gif" width="80" height="60" alt="" /> 
   <strong> Birthday wishes </strong></li> 
  <li id="id-2" class="app"> 
   <img src="images/festival.gif" width="80" height="60" alt="" /> 
   <strong> Holiday wishes </strong></li> 
  <li id="id-3" class="sys"> 
   <img src="images/jifen.gif" width="80" height="60" alt="" /> 
   <strong> Integral management </strong></li> 
  ....N more li 
</ul> 

The XHTML structure consists of a navigation bar and a content list. In the content list #list, I added an id attribute to each li to make it easier for the Quicksand plug-in to call.

CSS

#nav{height:36px; margin:10px auto; border-bottom:1px solid #36c} 
#nav ul{list-style:none; padding-left:120px} 
#nav ul li{float:left; height:34px; line-height:34px; margin-left:6px; 
padding:0px 12px; border-left:1px solid #d3d3d3; border-right:1px solid #d3d3d3; 
 border-top:1px solid #d3d3d3; background:#f7f7f7; cursor:pointer} 
#nav ul li.cur{height:35px; background:#36c; color:#fff} 
.image-grid{zoom:1} 
.image-grid li{width: 82px; height:100px; margin: 20px 0 0 35px; float:left; 
 text-align: center; line-height:18px;color: #686f74;overflow:hidden;} 
.image-grid li img,.image-grid li strong{display:block;} 

I set the TAB style for the navigation bar #nav and the style for the checked status #nav ul li.cur. The list content area also sets the fixed height and width of each image.

jQuery

First, copy the contents of the list area:

var $data=$("#list").clone(); 

Then, to implement the TAB style, when clicking on the navigation, add the selected style to the currently clicked item, while other items remove the selected status style:

$("#nav ul li").click(function(){ 
  $(this).addClass("cur"); 
  $(this).siblings().removeClass("cur"); 
}); 

Then, at click time, continue to get ID for the current click option, get the data source $source by judging the ID value, and finally call the quicksand plug-in. The complete code is as follows:

$("#nav ul li").click(function(){ 
  $(this).addClass("cur"); 
  $(this).siblings().removeClass("cur"); 
  var id = $(this).attr("id"); 
    if(id=="all"){ 
      var $source=$data.find("li"); 
    }else{ 
      var $source=$data.find("li[class="+id+"]"); 
    } 
    $("#list").quicksand($source,{ 
      duration: 1000, 
      attribute: 'id', 
      easing: 'swing' 
    }); 
  }); 
}); 

The Quicksand plug-in provides several parameters that can be configured:
duration: Time of transition animation, in milliseconds.
attribute: Attribute of the associated data, in this case set to id.
easing: Animation buffering mode.

There is also a method enhancement: function(c) {} to customize the function call.

By the way, IE6 has no transition animation effect, IE7+ and other advanced browsers have passed the test.

This is the end of this article, I hope you enjoy it.