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

Source: Internet
Author: User
Tags shuffle

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.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.