مثال على استخدام animate في jQuery لتحقيق تأثير حركة الأعمدة ul

تحليل هذا المثال تحليل استخدام jQuery لتحقيق تأثير حركة ul لأسفل. مشاركة الجميع لأخذ العبرة، مثلما يلي:

!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 () {
        //البداية في الموقع المطفأ، بسبب margin-left الخاص ب ulRight وهو 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'>الحمامة البيضاء</li>
      <li name='pigeon'>الحمامة الزهرية</li>
      <li name='pigeon'>الحمامة السوداء</li>
      <li name='pigeon'>الحمامة الرمادية</li>
      <li name='pigeon'>الحمامة الحمراء</li>
      <li name='pigeon'>الحمامة الحمراء</li>
    </ul>
    <ul id="ulRight">
    </ul>
    <div style="clear:both;"></div>
  </div>
</body>
</html>

للمزيد من المعلومات حول jQuery، يمكن للقراء المهتمين التحقق من المقالات المخصصة على هذا الموقع: 'مقدمة إلى الإضافات الشائعة لjQuery وطرق الاستخدام'، 'جمعية التأثيرات الكلاسيكية لjQuery'، 'تعليمات التشغيل لjQuery form'، 'تعليمات التشغيل لjQuery json'، 'تعليمات التشغيل لjQuery expansion'، 'تعليمات التشغيل للتأثيرات والتحركات لjQuery'، 'تعليمات التشغيل للتحكم في الجداول (table) لjQuery'، 'تعليمات التشغيل لAjax في jQuery'، 'تعليمات التشغيل للتأثيرات والتحركات لjQuery'، و'تعليمات التشغيل للوحدات المختارة لjQuery'.

آمل أن يساعدك محتوى هذا المقال في تصميم برامج jQuery.

البيان: محتوى هذا المقال تم جمعه من الإنترنت، ويتمتع المالك الأصلي بحقوق الطبع والنشر، ويتم جمع المحتوى من قبل المستخدمين عبر الإنترنت بشكل متعاوني وتحميله بشكل مستقل، ويتمتع هذا الموقع بعدم امتلاك حقوق الملكية، ولا يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا وجدت أي محتوى يشتبه في انتهاك حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (أثناء إرسال البريد الإلكتروني، يرجى استبدال '#' بـ '@') لتقديم الشكوى، وتقديم الدليل، وسيتم حذف المحتوى المشبوه المزعوم فور التحقق منه.

تعليمية الأساس

تحب أن ترى