Exemple de réalisation d'effet de glissement des éléments de liste ul avec animate dans jQuery

Cette exemple analyse l'utilisation de jQuery pour réaliser l'effet de flottaison des éléments de liste ul. Partageons-le avec tous pour la référence, voici les détails :

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
    body{font-size:12px;marging:0px;padding:0px;}
    #main{width:600px;margin:auto;background-color:gold;}
    ul{float:left;margin:30px;width:80px;height:140px;padding:2px;background-color:#0099cc}
    #ulRight{margin-left:300px;}
    li{list-style-type:none;margin-top:3px;background-color:Gray;}
  </style>
  <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("li[name='pigeon']").click(function () {
        //开始飘动的位置,由于ulRight的margin-left为300px所以要加300,同理leftUl也一样
        var rightUlLeft = parseInt($("#ulRight").position().left + 300) + "px";
        var leftUlLeft = parseInt($("#ulLeft").position().left + 30) + "px";
        if ($(this).parent().attr("id") == "ulLeft") {
          $(this).queue(function (next) {
            $(this).css({ "position": "absolute", "left": leftUlLeft });
            next();
          })
          .animate({ "left": rightUlLeft }, 2000)
          .queue(function () {
            $(this).appendTo("#ulRight").css({ "position": "static" });
            $(this).dequeue();
          });
        }
        else {
          $(this).queue(function (next) {
            $(this).css({ "position": "absolute", "left": rightUlLeft });
            next();
          })
          .animate({ "left": leftUlLeft }, 2000)
          .queue(function () {
            $(this).appendTo("#ulLeft").css({ "position": "static" });
            $(this).dequeue();
          });
        }
      });
    });
  </script>
</head>
<body>
  <div id="main">
    <ul id="ulLeft">
      <li name='pigeon'>Pigeon blanc</li>
      <li name='pigeon'>Pigeon aux couleurs vives</li>
      <li name='pigeon'>Pigeon noir</li>
      <li name='pigeon'>Pigeon gris</li>
      <li name='pigeon'>Pigeon rouge</li>
      <li name='pigeon'>Pigeon rouge</li>
    </ul>
    <ul id="ulRight">
    </ul>
    <div style="clear:both;"></div>
  </div>
</body>
</html>

Pour ceux qui sont intéressés par plus de contenu sur jQuery, vous pouvez consulter les sujets spéciaux de ce site : 'Résumé des plugins courants et des utilisations de jQuery', 'Résumé des effets classiques courants de jQuery', 'Résumé des techniques de manipulation des formulaires de jQuery', 'Résumé des techniques de manipulation des données JSON de jQuery', 'Résumé des techniques d'extension de jQuery', 'Résumé des techniques d'effets de glisser-déposer de jQuery', 'Résumé des techniques de manipulation des tableaux (table) de jQuery', 'Résumé des utilisations d'Ajax dans jQuery', 'Résumé des utilisations des animations et des effets de jQuery', et 'Résumé des utilisations des sélecteurs de jQuery'.

J'espère que les informations fournies dans cet article seront utiles pour la conception de programmes jQuery.

Déclaration : Le contenu de cet article est tiré d'internet, propriété des auteurs respectifs, le contenu est contribué et téléchargé par les utilisateurs d'Internet de manière spontanée. Ce site ne possède pas de propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)

Manual de base