JQuery plug-in Quicksand achieves stunning animated shuffling effect_jquery

Quicksand is a jQuery-based plug-in that can reorder and filter elements on the page. It also has a very good shuffling transition animation effect and can be used in many projects to enhance user experience. This article explains the use of Quicksand based on actual project applications.

XHTML

<div id="nav"> 
  <ul> 
   <li id="all" class="cur">所有功能模块</li> 
   <li id="app">应用程序</li> 
   <li id="sys">系统管理</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>生日祝福</strong></li> 
  <li id="id-2" class="app"> 
   <img src="images/festival.gif" width="80" height="60" alt="" /> 
   <strong>节日祝福</strong></li> 
  <li id="id-3" class="sys"> 
   <img src="images/jifen.gif" width="80" height="60" alt="" /> 
   <strong>积分管理</strong></li> 
  ....N多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. This is to facilitate the Quicksand plug-in 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 set the style for the selected state #nav ul li.cur. The list content area also sets a fixed height and width for each image.

jQuery

First, copy the contents of the list area:

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

Then, to implement the tab style, when the navigation is clicked, the selected style is added to the currently clicked item, and the selected style is removed from other items:

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

Then, continue to obtain the ID of the currently clicked option during the click time, obtain 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 configurable parameters:
duration: The time of the transition animation, in milliseconds.
attribute: attribute of associated data, set to id in this example.
easing: animation buffering method.

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

By the way, there is no transition animation effect under IE6. IE7 and other advanced browsers have passed the test.

The above is the entire content of this article, I hope you all like it.