jQuery 效果 - 淡入淡出

jQuery提供了一个简单的界面来执行各种令人惊奇的效果。

jQuery效果方法使我们能够以最少的配置快速应用常用的效果。

jQuery淡入淡出方法

使用jQuery，我们可以实现淡入或淡出效果。

我们有以下jQuery淡入淡出方法：

• fadeIn()

• fadeOut()

• fadeToggle()

• fadeTo()

下一节将向您展示如何使用每种淡入淡出方法。

jQuery fadeIn()和fadeOut()

jQuery fadeIn()方法逐渐将选定元素的不透明度从隐藏更改为可见。

jQuery fadeOut()方法逐渐将选定元素的不透明度从可见更改为隐藏。

以下示例演示了fadeIn()方法和fadeOut()方法的用法：

// 淡出显示的段落
$("#fadeout-btn").click(function() {
　　$("p").fadeOut();
});
// 淡入隐藏的段落
$("#fadein-btn").click(function() {
　　$("p").fadeIn();
});

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

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

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

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

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

• duration -يحدد ما إذا كان يجب إكمال تأثير التباينالزمنالزمن المستغرق. القيم الممكنة هي: "بطيئ"، "سريع" أو الميليسي ثانية

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

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

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

$("#fadeout-btn").click(function() {
　　$("p").fadeOut(1500);
});
$("#fadein-btn").click(function() {
　　$("p").fadeIn(1500);
});

يوضح المثال التالي تأثير fadeIn() و fadeOut():الرفعالمتغيرات

$("#fadeout-btn").click(function() {
　　$("div").fadeOut(600, function() {
　　　　$("h3").text("اختفاء اكتمال.");
　　});
});
$("#fadein-btn").click(function() {
　　$("div").fadeIn(600, function() {
　　　　$("h3").text("توهج اكتمال.");
　　});
});

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

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

طريقة jQuery fadeToggle()

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

إذا كان العنصر المحدد يختفي،fadeToggle()إذن يتم توهجه.

إذا كان العنصر المحدد يوهج،fadeToggle()لهم.

في المثال التالي يتم تقليل<p>تبديل التدرج في التوهج والاختفاء للعنصر:

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

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

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

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

• duration -يحدد ما إذا كان يجب إكمال تأثير التباينالزمنالزمن المستغرق. القيم الممكنة هي: "بطيئ"، "سريع" أو الميليسي ثانية

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

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

طريقة jQuery fadeTo()

jQuery fadeTo()الطريقة تعتمد تدريجياً مستوى الشفافية للعنصر المحدد إلى الشفافية المحددة.

ملاحظة:هذاfadeTo()الطريقة لا تغير تصميم الصفحة (العنصر المحدد سيحتل نفس المساحة كما من قبل).

في هذا المثال يتم تقليل<div>مستوى الشفافية للعنصر:

$("button").click(function(){
　　$("div").fadeTo(500, 0.2);
});

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

$(selector)fadeTo.(duration, opacity, easing, callback)

المتغيرات

• duration -يحدد ما إذا كان يجب إكمال تأثير التباينالزمنالزمن المستغرق. القيم الممكنة هي: "بطيئ"، "سريع" أو الميليسي ثانية

• opacity-الشفافية التي يتم تباينها إليها. يجب أن تكون بين 0.00 و 1.00

• easing -الوظيفة التي يتم استدعاؤها عند إكمال عملية الانتقال

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

هذا المثال يوضح استخدام fadeTo()الرفعالمتغيرات

$("button").click(function(){
　　$("div").fadeTo(500, 0, function(){
　　　　alert("تقليل الشفافية!!!");
　　});
});

مرجع تأثير جافا سكريبت

للحصول على معلومات كاملة حول التأثيرات، يرجى زيارةدليل مرجعي لأثر جافا سكريبت.