jQuery - تأثيرات - إخفاء وعرض

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

تمكننا من تحقيق التأثيرات الشائعة بسرعة باستخدام methods jQuery effects.

jQuery hide() و show()

يمكنك استخدامhide()وshow()يخفي ويعرض عناصر HTML.

إليك مثال يعرض استخدام methods hide() و show():

//　إخفاء المقطع المعرض
$("#hide-btn").click(function(){
　　$("p").hide();
});
//　عرض المقطع المخفي
$("#show-btn").click(function(){
　　$("p").show();
});

هذاhide() نحوية العملية:

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

هذاshow()نحوية العملية:

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

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

• duration -تحديد ما إذا كان يجب أن يكون التأثيرالاستمرارمدة. القيم الممكنة: "slow"، "fast" أو الميليسي ثانية

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

• callback-دالة يجب تنفيذها بعد اكتمال الطريقة المحددة

إليك مثال يستخدم hide() و show() لعرض ذلك:durationالمتغيرات:

$("#hide-btn").click(function(){
　　$("p").hide(1000);
});
$("#show-btn").click(function(){
　　$("p").show(1000);
});

إليك مثال يستخدم hide() و show() لعرض ذلك:الإعادة التشغيلالمتغيرات:

$("#hide-btn").click(function(){
　　$("div").hide(1000,　function(){
　　　　alert("DIV تم إخفاءه");
　　});
});
$("#show-btn").click(function(){
　　$("div").show(1000,　function(){
　　　　alert("DIV تم عرضه");
　　});
});

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

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

مетод jQuery toggle()

يمكننا أيضًا استخدامtoggle()يتبادل الطريقة بين إخفاء وإظهار العناصر HTML.

إذا كان العنصر المحدد يظهر في البداية، سيتم إخفاءه؛ إذا كان مخفيًا، سيتم إظهاره.

في هذا المثال، عند النقر على الزر، يتم إخفاء وإظهار جميع العناصر<p>تبديل بين العناصر:

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

toggle()جملة الطريقة هي:

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

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

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

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

• callback-دالة يجب تنفيذها بعد اكتمال الطريقة المحددة

مرجع تأثير jQuery

للحصول على مرجع شامل للأثر، يرجى زيارةدليل مرجعي Effects jQuery.