• 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، فكيف ذلك؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 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>

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن