Esempio di utilizzo di animate in jQuery per ottenere l'effetto di fluttuazione degli elementi della lista ul

Questa istanza analizza l'uso di animate per ottenere l'effetto di fluttuazione degli elementi della lista ul in jQuery. Condivido con tutti per riferimento, come segue:

!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;maring: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 () {
        //Inizio della posizione fluttuante, poiché il "margin-left" di "ulRight" è di 300px, quindi si deve aggiungere 300, allo stesso modo per "leftUl"
        var rightUlLeft = parseInt($("#ulRight").position().left + 300) + "px";
        var leftUlLeft = parseInt($("#ulLeft").position().left + 30) + "px";
        if ($.parent().attr("id") == "ulLeft") {
          $.queue(function (next) {
            $.css({ "position": "absolute", "left": leftUlLeft });
            next();
          });
          .animate({ "left": rightUlLeft }, 2000);
          .queue(function () {
            $.appendTo("#ulRight").css({ "position": "static" });
            $.dequeue(this);
          });
        }
        else {
          $.queue(function (next) {
            $.css({ "position": "absolute", "left": rightUlLeft });
            next();
          });
          .animate({ "left": leftUlLeft }, 2000);
          .queue(function () {
            $.appendTo("#ulLeft").css({ "position": "static" });
            $.dequeue(this);
          });
        }
      });
    });
  </script>
</head>
<body>
  <div id="main">
    <ul id="ulLeft">
      <li name='pigeon'>Cigno bianco</li>
      <li name='pigeon'>Cigno colorato</li>
      <li name='pigeon'>Cigno nero</li>
      <li name='pigeon'>Cigno grigio</li>
      <li name='pigeon'>Cigno rosso</li>
      <li name='pigeon'>Cigno rosso</li>
    </ul>
    <ul id="ulRight">
    </ul>
    <div style="clear:both;"></div>
  </div>
</body>
</html>

Chi è interessato a ulteriori contenuti jQuery può leggere la sezione speciale di questo sito: 'Riepilogo delle estensioni jQuery e delle loro applicazioni', 'Riepilogo delle tecnologie classiche jQuery', 'Riepilogo delle tecniche di gestione dei form jQuery', 'Riepilogo delle tecniche di gestione dei dati JSON jQuery', 'Riepilogo delle tecniche di estensione jQuery', 'Riepilogo delle tecniche di effetto trascinamento jQuery', 'Riepilogo delle tecniche di gestione delle tabelle (table) jQuery', 'Riepilogo dell'applicazione di Ajax in jQuery', 'Riepilogo delle tecniche di animazione e effetto jQuery' e 'Riepilogo delle tecniche di selezione degli elementi jQuery'.

Spero che l'articolo descritto possa essere utile per la progettazione di programmi jQuery di tutti.

Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, il copyright spetta ai rispettivi proprietari, il contenuto è stato caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato elaborato manualmente e non assume alcuna responsabilità legale. Se trovi contenuti sospetti di violazione del copyright, invia un'e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare e fornire prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.

Corso di base