اذهب إلى المحتوى
  • 0

كيف أنشئ دالة مع استعمال Sleep أو Delay على Jquery؟

محمد بوسكوري

السؤال

أريد تحريك كائن باستعمال Jquery، مع تحديد delay بقيمة 1000ms واستعملت الكود التالي:

$("#test").animate({"top":"-=80px"},1500)
      .animate({"top":"-=0px"},1000)
      .animate({"opacity":"0"},500);

وأيضا قمت بتجربة هذا:

$("#test").animate({"top":"-=80px"},1500)
      .sleep(1000)
      .animate({"opacity":"0"},500);

لكن ما أريده هو تحريك ببطء مع استعمال إحدى الدالتين، sleep أو delay، فكيف ذلك؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

دالة delay التي توفرها مكتبة Jquery هي دالة توقيت الغرض منها هو تنفيذ أمر برمجي ما بعد مدة معيّنة، أو ما يصطلح عليه بـ Timer، وتأخذ كقيمة لها قيمة عددية معبر عنها بـ ms أو "slow" للبطيئة و "fast" للسريعة، كمثال عملي وجواب على سؤالك:

$("#test").animate({"top":"-=80px"},1500)
          .delay(1000)
          .animate({"opacity":"0"},500);

يمكنك أيضا رؤية المثال التلي، الذي يضيف عند كل ضغطة زر عنصراً جديداً بعد مدد زمنية متغيّرة:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").delay("slow").fadeIn();
    $("#div2").delay("fast").fadeIn();
    $("#div3").delay(800).fadeIn();
    $("#div4").delay(2000).fadeIn();
    $("#div5").delay(4000).fadeIn();

  });
});
</script>
</head>
<body>

<p>This example sets different speed values for the delay() method.</p>
<button>Click to fade in boxes with a delay</button>
<br><br>

<div id="div1" style="width:90px;height:90px;display:none;background-color:black;"></div><br>
<div id="div2" style="width:90px;height:90px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:90px;height:90px;display:none;background-color:blue;"></div><br>
<div id="div4" style="width:90px;height:90px;display:none;background-color:red;"></div><br>
<div id="div5" style="width:90px;height:90px;display:none;background-color:purple;"></div><br>

</body>
</html>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...