jQuery Academy · درس

تسلسل الرسوم المتحركة ووضعها في قائمة انتظار

استكشف كيفية تسلسل أساليب رسوم متحركة متعددة وإدارة قائمة انتظار الرسوم المتحركة لإنشاء تأثيرات مرئية متتابعة ومنسّقة للواجهات الديناميكية.

تسلسل الرسوم المتحركة ووضعها في قائمة انتظار درس مجاني في jQuery Academy على CoddyKit. هذا هو الدرس 1 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في jQuery Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة jQuery Academy 3 دروس في المجموع.

مقدمة إلى تسلسل الرسوم المتحركة

تخيّلوا أنكم تريدون تحريك عنصر، ثم تغيير لونه، ثم جعله يتلاشى. قد يكون تنفيذ هذه الخطوات واحدةً تلو الأخرى يدويًا أمرًا معقدًا!

يتيح لكم تسلسل الرسوم المتحركة في jQuery ربط عدة طرق للرسوم المتحركة معًا. ويبدأ كل تأثير بعد اكتمال التأثير السابق، مما ينشئ تأثيرات متسلسلة وسلسة.

بنية التسلسل الأساسية

تعيد طرق jQuery غالبًا كائن jQuery نفسه، مما يتيح لكم استدعاء طريقة أخرى مباشرةً على النتيجة وتكوين «سلسلة».

في المثال هنا، يتحرك مربع إلى اليمين، ثم إلى الأسفل. جرّبوا تشغيله!

<!DOCTYPE html>
<html>
<head>
<title>jQuery Chaining</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Chain</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 1000) // Move right
          .animate({top: '50px'}, 800); // Move down
      });
    });
  </script>
</body>
</html>

إنشاء تسلسلات معقدة

يمكنكم تسلسل العديد من طرق الرسوم المتحركة معًا. ويضع jQuery هذه الرسوم تلقائيًا في قائمة انتظار داخلية، مما يضمن تشغيلها بالترتيب الذي تحددونه.

ينشئ ذلك تدفقًا متسلسلًا لعناصر واجهة المستخدم. راقبوا المربع وهو يتحرك، ثم يكبر، ثم يتلاشى!

<!DOCTYPE html>
<html>
<head>
<title>Complex Chaining</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: green;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Sequence</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800)
          .animate({height: '100px', width: '100px'}, 600)
          .animate({opacity: 0.5}, 500)
          .animate({top: '100px'}, 700)
          .fadeOut(500); // Fades out completely
      });
    });
  </script>
</body>
</html>

آلية عمل قائمة انتظار الرسوم المتحركة

عند تسلسل طرق الرسوم المتحركة، لا يشغّلها jQuery كلها في الوقت نفسه، بل يضيفها إلى قائمة خاصة تُسمّى قائمة انتظار الرسوم المتحركة، أو قائمة انتظار «fx».

يبدأ تأثير الرسوم المتحركة الأول فورًا.
تنتظر التأثيرات التالية في قائمة الانتظار.
عند انتهاء أحد التأثيرات، يأخذ jQuery التأثير التالي من قائمة الانتظار ويبدأ تشغيله تلقائيًا.

يضمن ذلك تنفيذ الرسوم المتحركة بالتتابع وبطريقة يمكن توقّعها.

إضافة فواصل باستخدام .delay()

تحتاجون أحيانًا إلى إضافة فترة توقف بين الرسوم المتحركة. وتُعد طريقة .delay() مثالية لذلك! فهي توقف تنفيذ العناصر التالية في قائمة انتظار الرسوم المتحركة لمدة محددة.

يتحرك المربع، ثم يتوقف مؤقتًا، ثم يتحرك مرة أخرى.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Delay</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: purple;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Animation</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800) // Move right
          .delay(1000) // Pause for 1 second
          .animate({top: '50px'}, 800); // Move down
      });
    });
  </script>
</body>
</html>

تشغيل شيفرة مخصّصة في قائمة الانتظار

يمكنكم إدراج دوال لا تتعلق بالرسوم المتحركة مباشرةً في قائمة الانتظار باستخدام .queue(). ويتيح لكم ذلك تنفيذ إجراءات، مثل تغيير النص أو إضافة فئة، في الموضع المحدد بين الرسوم المتحركة.

تُنفَّذ الدالة عندما يحين دورها في قائمة الانتظار. تذكّروا استدعاء next() داخل الدالة المخصّصة لإخبار jQuery بالانتقال إلى العنصر التالي في قائمة الانتظار!

<!DOCTYPE html>
<html>
<head>
<title>Custom Queue Function</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: orange;
    position: relative;
    left: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <p id="status">Ready</p>
  <button id="startAnimation">Start Sequence</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800)
          .queue(function(next) { // Add custom function to queue
            $(this).css("background-color", "blue");
            $("#status").text("Color changed!");
            next(); // Crucial: tells jQuery to proceed
          })
          .animate({top: '50px'}, 800)
          .queue(function(next) {
            $("#status").text("Animation done!");
            next();
          });
      });
    });
  </script>
</body>
</html>

مقاطعة الرسوم المتحركة باستخدام .stop()

ماذا لو أردتم إيقاف رسم متحرك في منتصفه؟ طريقة .stop() هي الحل. إذ يمكنها إيقاف الرسم المتحرك الجاري حاليًا على عنصر.

.stop(true): توقف الرسم المتحرك الحالي وتمسح قائمة انتظار الرسوم المتحركة بأكملها.
.stop(false, true): توقف الرسم المتحرك الحالي وتنقله مباشرةً إلى حالته النهائية، لكنها لا تمسح قائمة الانتظار.

استخدموها بحذر، لأنها قد تعطل التسلسلات التي خططتم لها بعناية!

<!DOCTYPE html>
<html>
<head>
<title>jQuery Stop</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: teal;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start</button>
  <button id="stopAnimation">Stop (clear queue)</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 2000)
          .animate({top: '100px'}, 2000)
          .animate({left: '0px'}, 2000);
      });

      $("#stopAnimation").on("click", function() {
        $("#myBox").stop(true, false); // Stop current, clear queue, don't jump to end
      });
    });
  </script>
</body>
</html>

الانتقال إلى نهاية الرسوم المتحركة باستخدام .finish()

تُعد طريقة .finish() وسيلة قوية لإكمال جميع الرسوم المتحركة الجارية حاليًا على عنصر فورًا، ومسح قائمة انتظار الرسوم المتحركة الخاصة به.

وهي أشبه باستدعاء .stop(true, true) على جميع الرسوم المتحركة.
ينتقل العنصر فورًا إلى الحالة النهائية لجميع الرسوم المتحركة الموجودة في قائمة الانتظار.

يفيد ذلك في أزرار «إعادة الضبط» أو عند نقل عنصر بسرعة إلى حالته النهائية بعد اكتمال الرسوم المتحركة.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Finish</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: darkblue;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Long Chain</button>
  <button id="finishAnimation">Finish All</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 3000)
          .animate({top: '100px'}, 3000)
          .animate({width: '100px'}, 3000);
      });

      $("#finishAnimation").on("click", function() {
        $("#myBox").finish(); // Instantly jump to final state
      });
    });
  </script>
</body>
</html>

تسلسل تأثيرات متنوعة

لا يقتصر التسلسل على .animate()! يمكنكم تسلسل العديد من طرق الرسوم المتحركة الأخرى في jQuery، مثل .fadeIn() و.slideUp() و.slideToggle() وغيرها.

تستخدم هذه الطرق أيضًا قائمة انتظار الرسوم المتحركة نفسها، مما يتيح لكم إنشاء تسلسلات مرئية معقدة بسهولة.

<!DOCTYPE html>
<html>
<head>
<title>Mixed Animation Chain</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 80px;
    height: 80px;
    background-color: #3498db;
    margin-bottom: 10px;
    display: none; /* Start hidden */
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Mixed Chain</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .fadeIn(500) // Fade in
          .delay(500) // Pause
          .slideUp(500) // Slide up
          .delay(500) // Pause
          .slideDown(500) // Slide down
          .animate({width: '120px', height: '120px'}, 700); // Grow
      });
    });
  </script>
</body>
</html>

اختبار سريع على التسلسل

اطّلعوا على شيفرة jQuery التالية. ما الحالة النهائية للعنصر #myBox بعد النقر على الزر؟

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  #myBox {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: relative;
    left: 0px;
    opacity: 1;
  }
</style>
</head>
<body>
  <div id="myBox"></div>
  <button id="btn">Click Me</button>
  <script>
    $(document).ready(function() {
      $("#btn").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 500)
          .delay(500)
          .animate({opacity: 0.5}, 500)
          .hide(500);
      });
    });
  </script>
</body>
</html>

مراجعة: التسلسل وقوائم الانتظار

أحسنتم! لقد تعلّمتم كيفية إنشاء تأثيرات مرئية ديناميكية ومتسلسلة باستخدام آلية تسلسل الرسوم المتحركة وقوائم الانتظار في jQuery.

التسلسل: ربط عدة طرق للرسوم المتحركة معًا.
قائمة الانتظار: يدير jQuery الرسوم المتحركة بالتتابع.
.delay(): إضافة فترة توقف بين الرسوم المتحركة.
.queue(): إدراج دوال مخصّصة في قائمة الانتظار.
.stop(): مقاطعة قائمة الانتظار أو مسحها.
.finish(): إكمال جميع الرسوم المتحركة الموجودة في قائمة الانتظار فورًا.

بعد ذلك، سنتعمّق في التسهيل المخصّص واستدعاءات الرسوم المتحركة لمزيد من التحكم الدقيق!

الأسئلة الشائعة

هل درس «تسلسل الرسوم المتحركة ووضعها في قائمة انتظار» مجاني؟

نعم — نص درس «تسلسل الرسوم المتحركة ووضعها في قائمة انتظار» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة jQuery Academy، انتقل إلى CoddyKit PRO. تتضمن دورة jQuery Academy 3 دروس في المجموع.

ماذا ستتعلم في «تسلسل الرسوم المتحركة ووضعها في قائمة انتظار»؟

استكشف كيفية تسلسل أساليب رسوم متحركة متعددة وإدارة قائمة انتظار الرسوم المتحركة لإنشاء تأثيرات مرئية متتابعة ومنسّقة للواجهات الديناميكية. تتمرن على jQuery Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ jQuery Academy؟

لا تُشترط خبرة سابقة. jQuery Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 3.

كم من الوقت يستغرق درس «تسلسل الرسوم المتحركة ووضعها في قائمة انتظار»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس jQuery Academy هذا؟

نعم. كل درس في jQuery Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

تسلسل الرسوم المتحركة ووضعها في قائمة انتظار
دوال التسهيل المخصّصة واستدعاءات الرسوم المتحركة
تأثيرات التبديل والانزلاق المتقدّمة

← العودة إلى jQuery Academy