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

محمد بوسكوري · 16 ديسمبر 2015

أريد تحريك كائن باستعمال 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، فكيف ذلك؟

E.Nourddine · 19 ديسمبر 2015

دالة 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>