الفرق بين المراجعتين لصفحة: «jQuery/delay»
< jQuery
Khaled-yassin (نقاش | مساهمات) أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:التابع <code>.delay()</code>...' |
لا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:التابع <code>.delay()</code> في jQuery}}</noinclude> | <noinclude>{{DISPLAYTITLE:التابع <code>.delay()</code> في jQuery}}</noinclude> | ||
==<code>.delay( duration [, queueName ] )</code>== | |||
== .delay( duration [, queueName ] ) == | ===القيمة المعادة=== | ||
يُعيد كائنًا من النوع [[jQuery/jQuery|jQuery]]. | |||
=== القيمة المعادة === | ===الوصف=== | ||
يُعيد كائنًا من النوع jQuery. | يضبط هذا التابع مؤقِّت لتأجيل تنفيذ العناصر التالية في طابور (queue) الانتظار. | ||
===<code>.delay( duration [, queueName ] )</code>=== | |||
=== الوصف === | |||
يضبط هذا التابع مؤقِّت لتأجيل تنفيذ العناصر التالية في | |||
=== <code>.delay( duration [, queueName ] )</code> === | |||
أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.4 1.4]. | أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.4 1.4]. | ||
====<code>duration</code>==== | |||
عدد صحيح يشير إلى مدة تأخير تنفيذ العنصر التالي في طابور (queue) الانتظار بالمللي ثانية. | |||
====<code>queueName</code>==== | |||
سلسلة نصية تحتوي على اسم قائمة الانتظار التأثيرات القياسية. قيمتها الافتراضية <code>fx</code>. | |||
يسمح لنا التابع <code>.delay()</code> بتأخير تنفيذ الدوال التي تتبعه في طابور (queue) الانتظار. ويمكن استخدامه مع طابور انتظار التأثيرات القياسية أو مع طوابير الانتظار المخصصة. ويؤجل الأحداث اللاحقة فقط في طابور انتظار؛ على سبيل المثال فإنه لن يؤخر أشكال الدوال <code>[[JQuery/show|.show()]]</code> أو <code>[[JQuery/hide|.hide()]]</code> التي لا يوجد به وسائط والتي لا تستخدم طابور انتظار التأثيرات. | |||
يسمح لنا التابع <code>.delay()</code> بتأخير تنفيذ الدوال التي تتبعه في | |||
تُعطى المدد بالمللي ثانية، وتشير القيم الأعلى إلى حركة أبطأ، وليس أسرع. يمكن توفير السلاسل 'fast' و 'slow' للإشارة إلى الفترات 200 و 600 ميللي ثانية، على التوالي. | تُعطى المدد بالمللي ثانية، وتشير القيم الأعلى إلى حركة أبطأ، وليس أسرع. يمكن توفير السلاسل <code>'fast'</code> و <code>'slow'</code> للإشارة إلى الفترات 200 و 600 ميللي ثانية، على التوالي وبالترتيب. | ||
باستخدام قائمة انتظار التأثيرات القياسية، يمكننا، على سبيل المثال، ضبط تأخير بمقدار 800 مللي ثانية بين <code>[[ | باستخدام قائمة انتظار التأثيرات القياسية، يمكننا، على سبيل المثال، ضبط تأخير بمقدار 800 مللي ثانية بين <code>[[JQuery/slideUp|.slideUp()]]</code> و <code>[[JQuery/fadeIn|.fadeIn()]]</code> للعنصر <code><[[HTML/div|div]] id="foo"></code>:<syntaxhighlight lang="jquery"> | ||
$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 ); | $( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 ); | ||
</syntaxhighlight>عند تنفيذ هذه العبارة، ينزلق العنصر لأعلى لمدة 300 مللي ثانية ثم يتوقف مؤقتًا لمدة 800 مللي ثانية قبل أن يتلاشى في مدة 400 مللي ثانية. | </syntaxhighlight>عند تنفيذ هذه العبارة، ينزلق العنصر لأعلى لمدة 300 مللي ثانية ثم يتوقف مؤقتًا لمدة 800 مللي ثانية قبل أن يتلاشى في مدة 400 مللي ثانية. | ||
يُعد التابع <code>.delay()</code> هو الأفضل للتأخير بين تأثيرات jQuery الموجودة في قائمة الانتظار. نظرًا لأنه محدود - على سبيل المثال ، لا يقدم طريقة لإلغاء التأخير - لا يعُد التابع <code>.delay()</code> بديلاً عن دالة <code>setTimeout</code> الأصيلة في JavaScript، والتي قد تكون أكثر ملائمة لحالات استخدام معينة. | يُعد التابع <code>.delay()</code> هو الأفضل للتأخير بين تأثيرات jQuery الموجودة في قائمة الانتظار. نظرًا لأنه محدود - على سبيل المثال ، لا يقدم طريقة لإلغاء التأخير - لا يعُد التابع <code>.delay()</code> بديلاً عن دالة <code>setTimeout</code> الأصيلة في JavaScript، والتي قد تكون أكثر ملائمة لحالات استخدام معينة. | ||
===أمثلة=== | |||
=== أمثلة === | تنشيط إخفاء وإظهار عنصري <code>[[HTML/div|<nowiki><div></nowiki>]]</code>، مع تأخير الأول قبل إظهاره:<syntaxhighlight lang="html"> | ||
تنشيط إخفاء وإظهار | |||
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 69: | سطر 62: | ||
</html> | </html> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
==مصادر== | |||
== مصادر == | *[http://api.jquery.com/delay/ صفحة التابع .delay() في توثيق jQuery الرسمي]. | ||
* [http://api.jquery.com/delay/ صفحة التابع .delay() في توثيق jQuery الرسمي]. | |||
[[تصنيف:jQuery]] | [[تصنيف:jQuery]] | ||
[[تصنيف:jQuery Method]] | [[تصنيف:jQuery Method]] | ||
[[تصنيف:jQuery Effects]] | [[تصنيف:jQuery Effects]] | ||
مراجعة 06:25، 10 مايو 2018
.delay( duration [, queueName ] )
القيمة المعادة
يُعيد كائنًا من النوع jQuery.
الوصف
يضبط هذا التابع مؤقِّت لتأجيل تنفيذ العناصر التالية في طابور (queue) الانتظار.
.delay( duration [, queueName ] )
أُضيف مع الإصدار: 1.4.
duration
عدد صحيح يشير إلى مدة تأخير تنفيذ العنصر التالي في طابور (queue) الانتظار بالمللي ثانية.
queueName
سلسلة نصية تحتوي على اسم قائمة الانتظار التأثيرات القياسية. قيمتها الافتراضية fx.
يسمح لنا التابع .delay() بتأخير تنفيذ الدوال التي تتبعه في طابور (queue) الانتظار. ويمكن استخدامه مع طابور انتظار التأثيرات القياسية أو مع طوابير الانتظار المخصصة. ويؤجل الأحداث اللاحقة فقط في طابور انتظار؛ على سبيل المثال فإنه لن يؤخر أشكال الدوال .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 الأصيلة في JavaScript، والتي قد تكون أكثر ملائمة لحالات استخدام معينة.
أمثلة
تنشيط إخفاء وإظهار عنصري <div>، مع تأخير الأول قبل إظهاره:
<!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>