Le plug-in JQuery Quicksand réalise un superbe effet de brassage animé_jquery

Quicksand est un plug-in basé sur jQuery qui peut réorganiser et filtrer les éléments sur la page. Il a également un très bon effet d'animation de transition aléatoire et peut être utilisé dans de nombreux projets pour améliorer l'expérience utilisateur. Cet article explique l'utilisation de Quicksand en fonction d'applications de projet réelles.

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> 

La structure XHTML se compose d'une barre de navigation et d'une liste de contenu. Dans la liste de contenu #list, j'ai ajouté un attribut id à chaque li afin de faciliter l'appel du plug-in Quicksand.

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;} 

J'ai défini le style d'onglet pour la barre de navigation #nav et j'ai défini le style pour l'état sélectionné #nav ul li.cur. La zone de contenu de la liste définit également une hauteur et une largeur fixes pour chaque image.

jQuery

Tout d'abord, copiez le contenu de la zone de liste :

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

Ensuite, pour implémenter le style d'onglet, lorsque l'utilisateur clique sur la navigation, le style sélectionné est ajouté à l'élément actuellement cliqué et le style sélectionné est supprimé des autres éléments :

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

Ensuite, continuez à obtenir l'ID de l'option actuellement cliquée pendant le temps de clic, obtenez la source de données $source en jugeant la valeur de l'ID, et enfin appelez le plug-in quicksand. Le code complet est le suivant :

$("#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' 
    }); 
  }); 
}); 

Le plug-in Quicksand propose plusieurs paramètres configurables :
durée : la durée de l'animation de transition, en millisecondes.
attribut : attribut des données associées, défini sur id dans cet exemple.
easing : méthode de mise en mémoire tampon d'animation.

Il existe également une amélioration de méthode : function(c) {} pour personnaliser les appels de fonction.

À propos, il n'y a pas d'effet d'animation de transition sous IE6 et d'autres navigateurs avancés ont réussi le test.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.