Ejemplo de efecto de movimiento flotante de elementos de lista ul utilizando animate en jQuery

Este ejemplo analiza el uso de animate en jQuery para lograr efectos de flotación entre elementos de una lista ul. Compartimos esto para su referencia, como se detalla a continuación:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <título></título>
  <style type="text/css">
    body{fuente-tamaño:12px;marín: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'>Golondrina Blanca</li>
      <li name='pigeon'>Golondrina Floral</li>
      <li name='pigeon'>Golondrina Negra</li>
      <li name='pigeon'>Golondrina Gris</li>
      <li name='pigeon'>Golondrina Roja</li>
      <li name='pigeon'>Golondrina</li>
    </ul>
    <ul id="ulRight">
    </ul>
    <div style="clear:both;"></div>
  </div>
</body>
</html>

Los lectores interesados en más contenido relacionado con jQuery pueden consultar la sección especial de este sitio: 'Resumen de Plugins y Usos Comunes de jQuery', 'Resumen de Efectos Clásicos Comunes de jQuery', 'Resumen de Técnicas de Operación de Formulario de jQuery', 'Resumen de Técnicas de Operación de Datos JSON de jQuery', 'Resumen de Técnicas de Extensión de jQuery', 'Resumen de Técnicas de Efecto de Arrastrar y Soltar de jQuery', 'Resumen de Técnicas de Operación de Tabla (table) de jQuery', 'Resumen de Usos de Ajax en jQuery', 'Resumen de Usos de Animación y Efecto en jQuery' y 'Resumen de Usos de Selectores en jQuery'.

Espero que lo descrito en este artículo pueda ayudar a todos en el diseño de programas jQuery.

Declaración: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido se ha contribuido y subido por los usuarios de Internet de manera autónoma, este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @ para denunciar y proporcione evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción de derechos de autor.)

Tutoriales básicos

Te gustará