jQuery تأثير - سلايد

jQuery يقدم واجهة بسيطة للتنفيذ تأثيرات مذهلة.

طرق jQuery التأثير تجعل من الممكن تطبيق التأثيرات الشائعة بسرعة باستخدام تكوينات قليلة.

طرق jQuery السلايد

باستخدام jQuery، يمكننا إنشاء تأثيرات السلايد على العناصر.

لدينا طرق jQuery السلايد التالية:

• slideUp()

• slideDown()

• slideToggle()

سنوضح لك كيفية استخدام كل طريقة تدحرج.

jQuery slideUp() و slideDown()

slideUp()يخفي العنصر المحدد بالتدحرج.

slideDown()يظهر العنصر المحدد بالتدحرج.

مثال يوضح استخدام slideUp() و slideDown()

// تدحرج النص للأعلى
　$("#btn1").click(function(){
　　　　　　$("p").slideUp();
});
// تدحرج النص للأسفل
　$("#btn2").click(function(){
　　　　　　$("p").slideDown();
});

هذاslideUp() نص النظام:

$("selector").slideUp(duration,　easing,　callback);

هذاslideDown()نص النظام:

$("selector").slideDown(duration,　easing,　callback);

بغض النظرslideUp()وslideDown()يقبل الطريقة ثلاثة معلمات اختيارية:

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

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

• callback-الوظيفة التي يتم استدعاؤها بعد إكمال عملية التدحرج

مثال يوضح استخدام slideUp() و slideDown()durationالمتغيرات:

$("#btn1").click(function(){
　　$("p").slideUp(1500);
});
$("#btn2").click(function(){
　　$("p").slideDown(1500);
});

مثال يوضح استخدام slideUp() و slideDown()الإصدارالمتغيرات:

$("#btn1").click(function(){
　　$("div").slideUp(1500,　function(){
　　　　alert("إكمال التدحرج للأعلى!");
　　});
});
$("#btn2").click(function(){
　　$("div").slideDown(1500,　function(){
　　　　alert("إكمال التدحرج للأسفل!");
　　});
});

تأثيرية جميع النصوص (في هذه الحالة كلمات) للتدحرج بسرعة، وإكمال كل تأثير في 200 ملي ثانية:

$("button").click(function(){
　　$("span:last-child").slideUp("fast",　function(){
　　　　$(this).prev().slideUp("fast",　arguments.callee);
　　});
});

طريقة jQuery slideToggle()

يمكننا أيضًا استخدامslideToggle()الطريقة تنتقل بين عناصر HTML بالتدحرج في الاتجاهين.

إذا كان العنصر المحدد يظهر أولاً سيتم إخفاءه؛ إذا كان مخفيًا سيتم عرضه.

في المثال التالي، عند النقر على الزر، سيتم تبديل جميع<p>تبديل بين slideUp و slideDown للاعتبار:

$("button").click(function(){
　　$("p").slideToggle(1500);
});

هذاslideToggle()قواعد النص للطريقة:

$(selector).slideToggle(duration, easing, callback);

slideToggle()يقبل الطريقة ثلاثة معلمات اختيارية:

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

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

• callback-تحديد دالة سيتم تنفيذها بعد إكمال طريقة slideToggle()

دليل مرجعي تأثير jQuery

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