jQuery 3.3

.delay()




jquery

.delay (المدة [، queueName]) الإرجاع: jQuery

الوصف: قم بتعيين مؤقت لتأجيل تنفيذ العناصر التالية في قائمة الانتظار.

  • الإصدار المضاف: 1.4 .delay (المدة [، queueName])

    • المدة الزمنية
      النوع: Integer
      عدد صحيح يشير إلى عدد المللي ثانية لتأخير تنفيذ العنصر التالي في قائمة الانتظار.
    • QUEUENAME
      اكتب: String
      سلسلة تحتوي على اسم قائمة الانتظار. الافتراضيات إلى fx ، قائمة الانتظار القياسية الآثار.

إضافة إلى jQuery في الإصدار 1.4 ، تسمح لنا طريقة .delay() بتأخير تنفيذ الوظائف التي تتبعها في قائمة الانتظار. يمكن استخدامه مع قائمة انتظار التأثيرات القياسية أو مع قائمة انتظار مخصصة. يتم تأجيل الأحداث اللاحقة فقط في قائمة انتظار؛ على سبيل المثال ، لن يؤدي هذا إلى تأخير النماذج بدون وسيطات .show() أو .hide() التي لا تستخدم قائمة انتظار التأثيرات.

يتم إعطاء المدد بالمللي ثانية. تشير القيم الأعلى إلى الرسوم المتحركة الأبطأ ، وليس الصور الأسرع. يمكن توفير السلاسل 'fast' و 'slow' للإشارة إلى الفترات من 200 و 600 ميلي ثانية ، على التوالي.

باستخدام قائمة انتظار التأثيرات القياسية ، يمكننا ، على سبيل المثال ، تعيين تأخير 800 ميلي ثانية بين .slideUp() و .fadeIn() لـ <div id="foo"> :

$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );

عند تنفيذ هذه العبارة ، ينزل العنصر لأعلى بمقدار 300 مللي ثانية ثم يتوقف مؤقتًا لمدة 800 مللي ثانية قبل أن يتلاشى لمدة 400 مللي ثانية.

تعتبر طريقة .delay() الأفضل للتأخير بين التأثيرات jQuery الموضوعة في قائمة الانتظار. نظرًا لأنها محدودة - على سبيل المثال ، لا تقدم طريقة لإلغاء التأخير - .delay() ليست بديلاً عن وظيفة setTimeout الأصلية لجافا سكريبت ، والتي قد تكون أكثر ملائمة لحالات استخدام معينة.

مثال:

تحريك إخفاء وعرض إثنين من divs ، مما يؤدي إلى تأخير الأول قبل عرضه.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>delay demo</title>
  <style>
  div {
    position: absolute;
    width: 60px;
    height: 60px;
    float: left;
  }
  .first {
    background-color: #3f3;
    left: 0;
  }
  .second {
    background-color: #33f;
    left: 80px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p><button>Run</button></p>
<div class="first"></div>
<div class="second"></div>
 
<script>
$( "button" ).click(function() {
  $( "div.first" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
  $( "div.second" ).slideUp( 300 ).fadeIn( 400 );
});
</script>
 
</body>
</html>

عرض: