Example of Implementing Floating Effect of ul List Items with animate in jQuery

This example analyzes the use of jQuery's animate function to achieve the floating effect between ul list items. Shared for everyone's reference, as follows:

<!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; margin: 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 () {
        //the starting floating position, due to the margin of ulRight-left as300px, so we need to add300, similarly, leftUl is also
        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" });
            $.dequeue();
          });
        }
        else {
          $(this).queue(function (next) {
            $(this).css({ "position": "absolute", "left": rightUlLeft });
            next();
          })
          .animate({ "left": leftUlLeft }, 2000)
          .queue(function () {
            $.appendTo("#ulLeft").css({ "position": "static" });
            $.dequeue();
          });
        }
      });
    });
  </script>
</head>
<body>
  <div id="main">
    <ul id="ulLeft">
      <li name='pigeon'>White Pigeon</li>
      <li name='pigeon'>Flower Pigeon</li>
      <li name='pigeon'>Black Pigeon</li>
      <li name='pigeon'>Grey Pigeon</li>
      <li name='pigeon'>Red Pigeon</li>
      <li name='pigeon'>Red Pigeon</li>
    </ul>
    <ul id="ulRight">
    </ul>
    <div style="clear:both;"></div>
  </div>
</body>
</html>

Readers who are interested in more content related to jQuery can check the special topics on this site: 'Summary of Common jQuery Plugins and Usage', 'Summary of Common Classic Effects of jQuery', 'Summary of jQuery Form Operation Skills', 'Summary of jQuery JSON Data Operation Skills', 'Summary of jQuery Extension Skills', 'Summary of jQuery Drag and Drop Effects and Skills', 'Summary of jQuery Table (table) Operation Skills', 'Summary of jQuery Ajax Usage', 'Summary of jQuery Animation and Effect Usage', and 'Summary of jQuery Selector Usage'

I hope the content described in this article will be helpful to everyone in jQuery program design.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal responsibility. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting. Provide relevant evidence, and once verified, this site will immediately delete the content suspected of infringement.)

Basic Tutorial