jquery plug-in quicksand to achieve a stunning animation shuffle effect

Quicksand This is a very good jQuery plug-in, used to achieve the animation shuffle effect, very practical, there is a need for small partners can refer to.

Quicksand is a jquery based plug-in, the elements on the page can be reordered and filtered, and has a very good shuffle transition animation effect, can be applied in many projects to enhance the user experience. In this paper, practical project application to explain the use of quicksand.

Xhtml

?

1 2 3 4 5 6 7 8 9

<div id= "nav" >    <ul>     < Li id= "all" class= "cur" > All function Modules </li>     <li id= "app" > Application </li>     <li id= "SYS" > System management </li>    </ul>  </div>  <ul id= "List" class= "Image-grid" >    <li id= "id-1" class= "app" >          <strong> birthday Wishes </strong ></li>    <li id= "id-2" class= "app" >          <strong> Holiday Blessings </strong></li >    <li id= "id-3" class= "sys" >          <strong> Integral management </strong ></li>     ..... N Multiple li  </ul>

The XHTML structure consists of a navigation bar and a list of content. In the Content list #list, I added an id attribute to each Li to facilitate Quicksand plug-in invocation.

Css

?

1 2 3 4 5 6 7 8 9 10

#nav {height:36px; margin:10px auto; border-bottom:1px solid #36c} #nav ul{list-style:none; padding-left:120px} #nav ul l  I{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 selected state #nav UL li.cur style. The list content area also sets the fixed height and width of each picture.

Jquery

First, copy the contents of the list area:

?

1	var $data =$ ("#list"). Clone ();

Then, to implement the tab style, when you click on the navigation, add the selected style to the currently clicked item, while the other item removes the selected state style:

?

1 2 3 4

$ ("#nav ul li"). Click (function () {$ (this). AddClass ("cur");  $ (this). Siblings (). Removeclass ("cur"); });

Next, continue in the click Time, get the ID of 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:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14-15 16

$ ("#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 to configure:

Duration: The time of the transition animation, in milliseconds.

Attribute: property of the associated data, this example is set to ID.

Easing: Animation buffering mode.

There is also a method Enhancement:function (c) {} can customize a function call.

Incidentally, there is no transition animation effect under IE6, ie7+, and other advanced browsers are tested through.

The above mentioned is the entire content of this article, I hope you can enjoy.