دورة الجيكويري - الدرس 7 - شرح delay | مدونة ملك العرب التعليمية

الثلاثاء، 2 سبتمبر 2014

دورة الجيكويري - الدرس 7 - شرح delay

الثلاثاء، 2 سبتمبر 2014 تحرير

بسم الله الرحمن الرحيم

اليوم إن شاء الله تعالى سنتعرف على .delay()

دورها هو تأخير تطبيق حدث ما لوقت معين سنطبق الدرس مع تأثيرات

show & hide

قبل البدء أحب التنويه إلى أنه مكتبة الجيكويري حساسة لحالة الأحرف لهذا أكتبوا الأكواد كما هي ..

لنبدأ بـمثال كالعادة وليكن التالي :

<!doctype html> <html> <head> <meta charset="utf-8"> <title>delay</title> <script src="lib/jquery.js"></script> <script> $(function(){ $( "button" ).click(function() { $( "div" ).show(3000); $( "div" ).delay(6000); $( "div" ).hide(3000); }); }); </script> <style> div { width: 100px; height: 100px; background: #ccc; border: 1px solid #000; display:none; } </style> </head> <body> <button>Show and Hide</button> <div> </div> </body> </html>

لنقم بتحليل الوثيقة كالعادة ..

قمنا بوضع استايل لـ div ولا يحتاج إلى شرح

<style> div { width: 100px; height: 100px; background: #ccc; border: 1px solid #000; display:none; } </style>

ثم قمنا باستدعاء مكتبة الجيكويري الخاصة بنا وأنا منزلها على السيرفر الشخصي

<script src="lib/jquery.js"></script>

ثم قمنا بكتابة أوامر سكربتنا بالطريقة المعهودة وهذا هو لب الدرس ..

اضن إنكم تعودتم على رؤية السكربت وأصبحتم تعرفون كل شيء عن السكربت تقريبا

لهذا سأكتفي بشرح سطحي وهو كالتالي أننا عند الضغط على زر البوطن المرة الأولى سيظهر div

وبعد مرور 6 ثواني سيختفي من جديد div

وطبعا يمكنك زيادة الوقت أو نقصانه حسب رغبتك

<script> $(function(){ $( "button" ).click(function() { $( "div" ).show(3000); $( "div" ).delay(6000); $( "div" ).hide(3000); }); }); </script>

الآن لم يتبقى سوى تطبيق السكربت ..
اضغط على الصورة لمشاهدة النتيجة ..

في الختام أحبابي في الله أتمنى صادقا دعوة صالحة لي ولوالدي

واراكم في الدرس المقبل إن شاء الله تعالى

محبكم محمد طه

بقلم محمد طه

محمد طه مدون مغربي مهتم ببرمجة وتصميم المواقع ومهووس بتعلم كل جديد في مجال البرمجة والتصميم واحب نشر ما اعرفه ليتعلم منه الناس باسلوبي الخاص

اضغط على السمايل للحصول على الكود: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@

اضف كود (html) ركن الاسئلة !