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

الخميس، 18 سبتمبر 2014

دورة الجيكويري - الدرس 15 - شرح animate

الخميس، 18 سبتمبر 2014 تحرير

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

السلام عليكم ورحمة الله وبركاته ..

كيف حالكم شباب اتمنى انكم تكونوا بالف صحة وعافية ..

اليوم إن شاء الله تعالى سنتعرف على animate

دورها هو إضافة خصائص css مباشرة من سكربت الجيكويري

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

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

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Animate</title> <script src="lib/jquery.js"></script> <script> $(function(){ $(".start").click(function(){ $(".add").animate({left:'+100px'}, 1500 ); $(".add").animate({left:'+5px'}, 1500 ); $(".add").animate({top:'-100px'}, 1500 ); }); }); </script> </head> <body> <h1 class="add1"> Mohammed Taha</h1> <h1 class="add2"> Mohammed Taha</h1> </body> </html>

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

قمنا بعمل عنصر button و عنصر h1 في وثيقتنا وأعطينا لكل واحد منهما كلاس خاص به كالتالي:

<button class="start">animate</button> <h1 class="add"> Mohammed Taha</h1>

ثم أعطينا للكلاس add خاصية :

<style> .add{ position: absolute; } </style>

ملاحظة إن كنت تريد تحريك الأشياء بالتأثير animate يجب إن تضيف دائما الخاصية أعلاه إلى العنصر المراد تحريكه

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

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

قمنا بعمل تحديد للكلاس start

- حيث إن الكلاس start يمثل البوطن الذي سنضغط عليه لتنفيذ الحركة

فعند الضغط على البوطن سيتم إزاحة النص الذي هو في الكلاس add والمحدد مسبقا عن اليسار 100 بكسل

ثم يعود ويقف على بعد 5 بكسل من اليسار

ثم ينزاح عن الأعلى 100 بكسل

وكل حركة تطبق في ثانية واحدة و500 جزء من المائة أي 1500s

الآن لم يتبقى سوى تطبيق السكربت ..

وأي استفسار أنا موجود إن شاء الله

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

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

محبكم محمد طه

بقلم محمد طه

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

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

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