تأثيرات jQuery - الرسوم المتحركة
باستخدام jQuery ، يمكنك إنشاء رسوم متحركة مخصصة.
jQuery Animations - طريقة الرسوم المتحركة ()
animate()تُستخدم طريقة jQuery لإنشاء رسوم متحركة مخصصة.
بناء الجملة:
$(selector).animate({params},speed,callback);
تحدد معلمة params المطلوبة خصائص CSS ليتم تحريكها.
تحدد معلمة السرعة الاختيارية مدة التأثير. يمكن أن يأخذ القيم التالية: "بطيء" أو "سريع" أو مللي ثانية.
معلمة رد الاتصال الاختيارية هي وظيفة يتم تنفيذها بعد اكتمال الرسم المتحرك.
يوضح المثال التالي استخدامًا بسيطًا animate()للطريقة ؛ ينقل عنصر <div> إلى اليمين ، حتى يصل إلى خاصية اليسار بمقدار 250 بكسل:
مثال
$("button").click(function(){
$("div").animate({left: '250px'});
});
بشكل افتراضي ، كل عناصر HTML لها موضع ثابت ، ولا يمكن نقلها.
لمعالجة الموضع ، تذكر أولاً تعيين خاصية موضع CSS للعنصر على نسبي أو ثابت أو مطلق!
jQuery animate () - معالجة الخصائص المتعددة
لاحظ أنه يمكن تحريك العديد من الخصائص في نفس الوقت:
مثال
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
هل من الممكن معالجة جميع خصائص CSS باستخدام طريقة animate ()؟
نعم تقريبا! ومع ذلك ، هناك شيء واحد مهم يجب تذكره: يجب أن تكون جميع أسماء الخصائص مغطاة بالجمل عند استخدامها مع طريقة animate (): ستحتاج إلى كتابة paddingLeft بدلاً من padding-left و marginRight بدلاً من margin-right وهكذا.
أيضًا ، لا يتم تضمين الرسوم المتحركة الملونة في مكتبة jQuery الأساسية.
إذا كنت تريد تحريك اللون ، فأنت بحاجة إلى تنزيل
المكون الإضافي Color Animations من jQuery.com.
jQuery animate () - استخدام القيم النسبية
من الممكن أيضًا تحديد القيم النسبية (تكون القيمة إذن مرتبطة بالقيمة الحالية للعنصر). يتم ذلك عن طريق وضع + = أو - = أمام القيمة:
مثال
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
jQuery animate () - استخدام قيم محددة مسبقًا
يمكنك حتى تحديد قيمة الحركة للخاصية مثل " show" hideأو "" أو " toggle":
مثال
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
jQuery animate () - يستخدم وظيفة قائمة الانتظار
بشكل افتراضي ، يأتي jQuery مع وظيفة قائمة الانتظار للرسوم المتحركة.
هذا يعني أنك إذا كتبت عدة animate()استدعاءات بعد بعضها البعض ، فإن jQuery تنشئ قائمة انتظار "داخلية" باستدعاءات الأسلوب هذه. ثم يقوم بتشغيل مكالمات الرسوم المتحركة واحدًا تلو الآخر.
لذلك ، إذا كنت ترغب في أداء رسوم متحركة مختلفة بعد بعضها البعض ، فإننا نستفيد من وظيفة قائمة الانتظار:
مثال 1
$("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");
});
يقوم المثال أدناه أولاً بنقل <div>العنصر إلى اليمين ، ثم زيادة حجم خط النص:
مثال 2
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
تمارين مسج
مرجع تأثيرات jQuery
للحصول على نظرة عامة كاملة على جميع تأثيرات jQuery ، يرجى الانتقال إلى مرجع تأثير jQuery .