jQuery Effects - Animation
ستتعلم في هذا الدرس كيف تقوم بعمل مؤثرات حركية Animations باستخدام jQuery
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
jQuery Effects - Animation
</> jQuery Effects - Animation
يمكنك تنفيذ بعض خصائص ال CSS في وقت زمني معين عن طريق animate funtion باستخدام مكتبة ال jQuery
Result
يظهر الكود بهذا الشكل على المتصفح
</> jQuery Animations
Syntax
$(selector).animate({params},speed,callback);
ال params parameter يكتب بداخله خصائص ال CSS التي سوف تنفذ اثناء ال Animation
ال speed parameter يكتب بداخلة الفترة الزمنية التي ينتهي خلالها ال Animation
ال optional callback parameter هي عبارة عن function سوفت تنفذ بعد انتهاء ال Animation
Example
$("button").click(function(){
$("div").animate({left: '250px'});
});
</> Pre-defined Values
Example
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
</> Queue Functionality
الوضع الافتراضي لل animations هو ال queue functionality وهي ان تضع قائمة انتظار للاوامر الحركات او المؤثرات بال CSS تنفذ بعد بعضها بالترتيب
يمكنك في بداية قائمة الانتظار ان تكتب خاصية تكبير العنصر وفي التي تليها تكتب امر بتغيير اللون وهكذا
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
</> Stop Animations
ال jQuery stop() method تسخدم في توقف الحركات والمؤثرات قبل انتهائها
Result
يظهر الكود بهذا الشكل على المتصفح
$("#stop").click(function(){
$("#panel").stop();
});
</> Callback Functions
ال optional callback هي عبارة عن function سوفت تنفذ بعد انتهاء ال Animation ويمكنك وضع اي اوامر برمجية باستخدام ال jQuery
Syntax
$(selector).animate(animate,speed,callback);
Example
$("#button").click(function(){
$("#p").animate({height:'hide'},"slow", function(){
alert("The paragraph is now hidden");
});
});
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعلم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة. نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي، لذا فإننا نركز على التعلم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن. هذه الخبرة ننقلها لك تحت إشراف مهندسين العباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
