jQuery - تأثيرات - تحريك

jQuery يسمح لنا بإنشاء تأثيرات تحريك مخصصة

طريقة animate() لتحريك jQuery

jQuery animate()يؤدي هذا المتدخل إلى تنفيذ تأثير تحريك مخصص على مجموعة خصائص CSS

هذا هوanimate()قواعد النحو للمتدخل:

$(selector).animate({styles}, duration, easing, callback)

المعلمات:

• {styles} - تحديد المجموعة من خصائص CSS والقيم التي سيتم تحريكها

• المدة - تحديد مدة تشغيل تأثير التحريك. القيم الممكنة: "slow","fast" أو المدة بالأجزاء الثانية

• التسوية - تحديد وظيفة التدفق المستخدمة للانتقال. القيم الممكنة: "swing","linear"

• callback-تحديد الدالة التي ستتم استدعاؤها بعد اكتمال عملية animate()

الامثلة التالية تعمل على تفعيل التحريك للاعداد العريضة للعنصر من خلال تغيير عرضه:

$("button").click(function(){
　　$("div").animate({width: "500px"});
});

الامثلة التالية تعمل على تفعيل التحريك للاعداد الجانبية للعنصر من خلال تغيير موقعه:

$("button").click(function(){
　　$("div").animate({left: "500px"});
});

jQuery animate()-إعداد متعدد الخصائص

يمكننا أيضًا إعداد رسوم متحركة لمتعدد الخصائص لمفردة واحدة في نفس الوقت.

$("button").click(function(){
　　$("div").animate({
　　　　width:"500px",
　　　　height:"400px",
　　　　opacity: 0.3,
　　　　left: "50px"
　　});
});

يوضح المثال التالي استخدام animate() لـالمدةوالتسويةالمعلمات:

$("button").click(function(){
　　$("div").animate({
　　　　width:"500px",
　　　　height:"400px"
　　}, 4000, "linear");
});

يوضح المثال التالي استخدام animate() لـالإعادة التشغيلالمعلمات:

$("button").click(function(){
　　$("div").animate({
　　　　width:"500px",
　　　　height:"400px"
　　}, 500, "linear",
　　function(){
　　　　$(this).after("<h2>الرسوم المتحركة اكتملت</h2>");
　　});
});

jQuery animate()-استخدام رسوم متحركة التسلسل

بافتراض الافتراض، يحتوي jQuery على وظيفة التسلسل للرسوم المتحركة.

في المجموعة، ينتظر إحدى أو أكثر الوظائف تنفيذها.

هذا يعني، إذا كتبت عدة دعوات animate() تالية، فإن jQuery سينشئ "مجموعة" "داخلية" باستخدام هذه الدعوات. ثم، يتحرك دفعة واحدة.

في المثال التالي، يتم تغيير عرض عنصر div أولاً، ثم الارتفاع، ثم زيادة حجم النص.

$("button").click(function(){
　　let div = $("div");
　　div.animate({width:"500px"});
　　div.animate({height:"200px"});
　　div.animate({fontSize: "10em"});
});

يمكننا أيضًا استخدام وظيفة الاتصال jQuery لتحريك متعدد الخصائص لمفردة واحدة في قائمة واحدة.

$("button").click(function(){
　　$("div")
　　　　.animate({width:"500px"})
　　　　.animate({height:"200px"})
　　　　.animate({fontSize: "10em"})
　　　　.animate({opacity: 0.3});
});

ستعرف المزيد عن الروابط في الجزء الأخير من هذا الدليل.

jQuery animate()-استخدام القيم النسبية

يمكن أن تكون خصائص الحركة أيضًا نسبية. إذا تم تقديم سلسلة من الحروف المقدمة += أو -=، فإن القيمة الهدف تُحسب عن طريق إضافة أو طرح الرقم المحدد من القيمة الحالية للخصائص.

$("p").click(function(){
　　$("this").animate({
　　　　fontSize: "+=5px",
　　　　padding : "+=10px"
　　});
});

jQuery animate()-استخدام القيم المسبقة

إضافة إلى ذلك، يمكننا أيضًا تحديد قيمة الحركة للخصائص "show"، "hide" أو "toggle":

$("button").click(function(){
　　$("div").animate({height: "toggle"});
});

مرجع تأثيرات jQuery

للحصول على معلومات كاملة حول التأثيرات، يرجى زيارةدليل مرجعي لـ تأثيرات jQuery。