قائمة طعام
مجاني
التسجيل
الصفحة الرئيسية  /  مشاكل/ Jquery سلس تغيير الشفافية. كيفية عمل شفافية سلسة لعنصر ويب باستخدام jQuery

Jquery سلس تغيير الشفافية. كيفية عمل شفافية سلسة لعنصر ويب باستخدام jQuery

لطالما تم اعتبار الرسوم المتحركة على صفحات الويب الحديثة أمرًا مفروغًا منه. تعمل العناصر الباهتة والرسائل المتحركة ومعارض الصور المنزلقة على تحسين تجربة المستخدم وزيادة أداء الموقع. في مكتبة جافا سكريبت الشهيرة ، يعد jQuery fadeIn () إحدى وظائف الرسوم المتحركة الأساسية. يتحكم في شفافية الكتل.

آثار التلاشي

طريقة fadeIn () تغير شفافية العنصر الذي تم تمريره إلى 100٪. في مكتبة jQuery ، يتم إقرانها بوظيفة fadeOut () ، والتي يمكن استخدامها لإلغاء العتامة وبالتالي "إذابة" العنصر.

سوف تكون مهتمًا بـ:

يمكن تحقيق تأثير مماثل باستخدام طريقة fadeTo () ، التي لها نطاق تأثير أوسع. يمكن لـ FadeTo () تعيين أي قيمة شفافية في النطاق من 0 إلى 1.

بناء جملة الأسلوب

يتم استدعاء طريقة fadeIn () في jQuery في سياق العنصر الذي يحتاج إلى تغيير عتامة. يمكن أن يستغرق الأمر من صفر إلى ثلاث معلمات:

element.fadeIn () ؛ element.fadeIn (المدة) ؛ element.fadeIn (المدة ، رد الاتصال) ؛ element.fadeIn (المدة ، التخفيف ، رد الاتصال) ؛ element.fadeIn (config) ؛

تحدد وسيطة المدة المدة التي ستستغرقها الرسوم المتحركة. يمكن أن يكون رقمًا يمثل عدد المللي ثانية ، أو أحد الكلمات الرئيسية:

  • "سريع" (200 مللي ثانية) ؛
  • "بطيء" (600 مللي ثانية) ؛

إذا لم يتم تعيين مدة ، فسيتم تعيينها افتراضيًا على 400 مللي ثانية.

تشير معلمة رد الاتصال إلى الوظيفة التي سيتم استدعاؤها فور انتهاء الرسم المتحرك. لا تقبل وظيفة رد الاتصال أي معلمات. يشير هذا المتغير بداخله إلى تعديل عقدة DOM.

تتحكم حجة التخفيف في توقيت الحركة ، أي سرعتها بمرور الوقت. يمكنك استخدامه لتسريع البداية وإبطاء نهاية الرسوم المتحركة ، أو لجعلها موحدة طوال الوقت. قيمة الوسيطة عبارة عن سلسلة تحتوي على كلمة رئيسية، الافتراضي هو وظيفة "البديل".

في المثال التالي ، ستعمل jQuery fadeIn () على زيادة شفافية العنصر بشكل موحد باستخدام class .block لمدة ثانية واحدة ، وبعد ذلك ستطبع رسالة إلى وحدة التحكم:

$ (". block"). fadeIn (1000، linear، function () (console.log ("الرسوم المتحركة مكتملة") ؛))؛

إذا كانت المعلمات المدرجة غير كافية ، يمكن أن تمرر الطريقة كائن تكوين ، والذي يمكن أن يحتوي على ما يصل إلى 11 إعدادًا مختلفًا.

وظائف رد الاتصال

معلمة رد الاتصال التي تم تمريرها إلى طريقة jQuery fadeIn () شديدة جدًا خيار مفيد، حيث يتم إجراء تغييرات الخصائص بشكل غير متزامن ، دون إعاقة التدفق العام لتنفيذ التعليمات البرمجية.

const callback = function () (console.log ("الرسوم المتحركة مكتملة") ؛) ؛ $ (". element"). fadeIn (1000) ؛ أتصل مرة أخرى ()؛

في هذا المثال ، سيتم تشغيل الوظيفة فور بدء الرسم المتحرك ، دون انتظار ظهور العنصر بالكامل.

لكي يعمل كل شيء على النحو المنشود ، استخدم وسيطة رد الاتصال لالتقاط نهاية الرسوم المتحركة:

const callback = function () (console.log ("الرسوم المتحركة مكتملة") ؛) ؛ $ (". element"). fadeIn (1000، callback)؛

الآن سيتم عرض رسالة في وحدة التحكم فقط عندما يصبح العنصر مرئيًا بالكامل.

الشفافية الكاملة وإخفاء العناصر

كما تعلم ، فإن القيمة الصفرية لخاصية العتامة لا تزيل العنصر من الصفحة ، ولكنها تجعله غير مرئي فقط. هذا السلوك غير مناسب إذا أردنا إخفاء كتلة.

لذلك ، تعمل طرق jQuery fade fadeIn () و fadeTo () و fadeOut () مع الشفافية مع خاصية العرض. يتم إخفاء عنصر شفاف تمامًا باستخدام العرض: لا توجد قاعدة ، ويتم إلغاء هذه القاعدة قبل ظهورها.

تأثيرات jQuery

التعريف والتطبيق

طريقة jQuery .تتلاشى ل ()يسمح لك بتغيير مستوى الشفافية للعناصر المحددة.

طريقة .تتلاشى ل ()يشبه طريقة fadeIn () ، ولكنه على النقيض من ذلك ، يسمح لك بالتحكم في المستوى المطلوب من شفافية العناصر.

بناء جملة jQuery:

بناء الجملة 1.0:$ (محدد) .fadeTo ( المدة الزمنية, العتامة, مكتمل) المدة الزمنية- رقم أو سلسلة العتامة- الرقم (0-1) مكتمل- وظيفة النحو 1.4.3:$ (محدد) .fadeTo ( المدة الزمنية, العتامة, التخفيف, مكتمل) المدة الزمنية- رقم أو سلسلة العتامة- الرقم (0-1) التخفيف- سلسلة مكتمل- وظيفة

تمت إضافته في إصدار jQuery

1.0 (تم تحديث البنية في 1.4.3)

قيمه المعامل

معاملوصف
المدة الزمنية سلسلة أو قيمة رقمية تحدد مدة استمرار الرسم المتحرك. الافتراضي هو 400(بالمللي ثانية). سلسلة الكلمات "بسرعة"و "بطيء"تطابق 200 و 600 مللي ثانية ، على التوالي (تشير القيم العالية إلى حركة بطيئة ، والقيم الأقل تشير إلى السرعة).
العتامة قيمة عددية بين 0 و 1 تدل على الشفافية للعنصر ( 1 - العنصر معتم ، 0.5 - يقصد، 0 - العنصر شفاف تمامًا).
التخفيف الكلمة الرئيسية (السلسلة) التي تحدد منحنى السرعة للرسوم المتحركة (باستخدام دالة رياضية - منحنى بيزير مكعب). بدون استخدام المكونات الإضافية الخارجية ، يكون لها معنيان فقط - خطي(تأثير الرسوم المتحركة بنفس السرعة من البداية إلى النهاية) و تأرجح(تأثير الرسوم المتحركة له بداية بطيئة ونهاية بطيئة ، لكن السرعة تزداد في منتصف الحركة). القيمة الافتراضية تأرجح.
مكتمل الوظيفة التي سيتم تنفيذها بعد انتهاء الرسوم المتحركة ، يتم استدعاؤها مرة واحدة لكل عنصر مناظر. داخل الوظيفة ، يشير هذا المتغير إلى عنصر DOM الذي يتم تطبيق الرسوم المتحركة عليه.

مثال على الاستخدام

</span>مثال باستخدام طريقة jQuery .fadeTo ()

.تتلاشى ل ()

قبل 0,5 في ثانية واحدة ( 1000 ميلي ثانية). لاحظ أن العنصر المخفي مرئي ، ويمكن تجنب ذلك باستخدام خاصية الرؤية المعينة على مخفي ، أو باستخدام المحددات التي لا تؤثر على العناصر المطلوبة.

نتيجة مثالنا:

ضع في اعتبارك المثال التالي الذي وضعنا فيه الطريقة تتلاشى ل ()وظيفة رد الاتصال:

</span>مثال باستخدام طريقة jQuery .fadeTo (مع وظيفة رد الاتصال)

في هذا المثال مع باستخدام jQueryطريقة .تتلاشى ل ()عندما نضغط على الزر ، نقوم بتغيير شفافية العناصر خطيًا

قبل 0,4 في نصف ثانية ( 500 ميلي ثانية). بالإضافة إلى ذلك ، عند اكتمال الرسم المتحرك ، نقوم باستدعاء وظيفة تضيف قيمة متغيرة لكل عنصر. لاحظ أنه داخل الوظيفة ، يشير هذا المتغير إلى عنصر DOM الذي يتم تطبيق الرسوم المتحركة عليه ، مما يسمح لنا بإضافة كل عنصر بدوره
كمحتوى نصي ، يتم زيادة قيمة المتغير بمقدار واحد.

نتيجة مثالنا.

لطالما تم اعتبار الرسوم المتحركة على صفحات الويب الحديثة أمرًا مفروغًا منه. تعمل العناصر الباهتة والرسائل المتحركة ومعارض الصور المنزلقة على تحسين تجربة المستخدم وزيادة أداء الموقع. في مكتبة جافا سكريبت الشهيرة ، يعد jQuery fadeIn () إحدى وظائف الرسوم المتحركة الأساسية. يتحكم في شفافية الكتل.

آثار التلاشي

طريقة fadeIn () تغير شفافية العنصر الذي تم تمريره إلى 100٪. في مكتبة jQuery ، يتم إقرانها بوظيفة fadeOut () ، والتي يمكن استخدامها لإلغاء العتامة وبالتالي "إذابة" العنصر.

يمكن تحقيق تأثير مماثل باستخدام طريقة fadeTo () ، التي لها نطاق تأثير أوسع. يمكن لـ FadeTo () تعيين أي قيمة شفافية في النطاق من 0 إلى 1.

بناء جملة الأسلوب

يتم استدعاء طريقة fadeIn () في jQuery في سياق العنصر الذي يحتاج إلى تغيير عتامة. يمكن أن يستغرق الأمر من صفر إلى ثلاث معلمات:

Element.fadeIn () ، element.fadeIn (المدة) ؛ element.fadeIn (المدة ، رد الاتصال) ؛ element.fadeIn (المدة ، التخفيف ، رد الاتصال) ؛ element.fadeIn (config) ؛

تحدد وسيطة المدة المدة التي ستستغرقها الرسوم المتحركة. يمكن أن يكون رقمًا يمثل عدد المللي ثانية ، أو أحد الكلمات الرئيسية:

  • "سريع" (200 مللي ثانية) ؛
  • "بطيء" (600 مللي ثانية) ؛

إذا لم يتم تعيين مدة ، فسيتم تعيينها افتراضيًا على 400 مللي ثانية.

تشير معلمة رد الاتصال إلى الوظيفة التي سيتم استدعاؤها فور انتهاء الرسم المتحرك. لا تقبل وظيفة رد الاتصال أي معلمات. يشير هذا المتغير بداخله إلى تعديل عقدة DOM.

تتحكم حجة التخفيف في توقيت الحركة ، أي سرعتها بمرور الوقت. يمكنك استخدامه لتسريع البداية وإبطاء نهاية الرسوم المتحركة ، أو لجعلها موحدة طوال الوقت. قيمة الوسيطة عبارة عن سلسلة تحتوي على الكلمة الأساسية ، افتراضيًا هذه هي وظيفة "التأرجح".

في ما يلي ، سيزيد fadeIn () بشكل موحد شفافية العنصر مع class .block لمدة ثانية واحدة ، وبعد ذلك ستطبع رسالة إلى وحدة التحكم:

$ (". block"). fadeIn (1000، linear، function () (console.log ("الرسوم المتحركة مكتملة") ؛))؛

إذا كانت المعلمات المدرجة غير كافية ، يمكن أن تمرر الطريقة كائن تكوين ، والذي يمكن أن يحتوي على ما يصل إلى 11 إعدادًا مختلفًا.

وظائف رد الاتصال

تعد معلمة رد الاتصال التي تم تمريرها إلى طريقة fadeIn () الخاصة بـ jQuery خيارًا مفيدًا للغاية لأن تغييرات الخصائص يتم إجراؤها بشكل غير متزامن دون حظر التدفق العام لتنفيذ التعليمات البرمجية.

رد اتصال Const = function () (console.log ("الرسوم المتحركة مكتملة") ؛) ؛ $ (". element"). fadeIn (1000) ؛ أتصل مرة أخرى ()؛

في هذا المثال ، سيتم تشغيل الوظيفة فور بدء الرسم المتحرك ، دون انتظار ظهور العنصر بالكامل.

لكي يعمل كل شيء على النحو المنشود ، استخدم وسيطة رد الاتصال لالتقاط نهاية الرسوم المتحركة:

رد اتصال Const = function () (console.log ("الرسوم المتحركة مكتملة") ؛) ؛ $ (". element"). fadeIn (1000، callback)؛

الآن سيتم عرض رسالة في وحدة التحكم فقط عندما يصبح العنصر مرئيًا بالكامل.

الشفافية الكاملة وإخفاء العناصر

كما تعلم ، فإن القيمة الصفرية لخاصية العتامة لا تزيل العنصر من الصفحة ، ولكنها تجعله غير مرئي فقط. هذا السلوك غير مناسب إذا أردنا إخفاء كتلة.

لذلك ، تعمل طرق jQuery fade fadeIn () و fadeTo () و fadeOut () مع الشفافية مع خاصية العرض. يتم إخفاء عنصر شفاف تمامًا باستخدام العرض: لا توجد قاعدة ، ويتم إلغاء هذه القاعدة قبل ظهورها.

يغير مستوى الشفافية للعناصر المحددة في الصفحة. يسمح لك بتغيير الشفافية بسلاسة. الطريقة لها حالتا استخدام:

المدة الزمنية- مدة التغيير في الشفافية. يمكن تحديده بالمللي ثانية أو قيمة السلسلة "سريع" أو "بطيء" (200 و 600 ميلي ثانية).
العتامة- قيمة الشفافية المطلوبة. يجب تحديده كرقم من 0 إلى 1 (0 - شفافية كاملة ، 1 - بدون شفافية).
أتصل مرة أخرى- الوظيفة المحددة كمعالج إكمال تغيير الشفافية. لا يتم تمرير أي معلمات إليه ، ومع ذلك ، داخل الوظيفة ، سيحتوي هذا المتغير على كائن DOM الخاص بالعنصر الذي تم تغيير شفافيته. إذا كان هناك العديد من هذه العناصر ، فسيتم استدعاء المعالج بشكل منفصل لكل عنصر.

المدة الزمنية- انظر الوصف أعلاه. بشكل افتراضي ، المعلمة هي 400
العتامة- أنظر فوق.
التخفيف- ديناميات التغيير في الشفافية (سواء كان سيتباطأ بنهاية التنفيذ أو ، على العكس من ذلك ، سيتسارع). (انظر الوصف)
أتصل مرة أخرى- أنظر فوق.

  • تغيير الشفافية
  • اضبط الشفافية على عنصر
  • اضبط مستوى الشفافية على العنصر
  • شفافية العنصر
  • .تتلاشى ل ()
  • تتلاشى ل ()

آخر تحديث: 1.11.2015

تسمح لنا تأثيرات الشفافية ، من خلال تغيير شفافية عنصر ما ، بإخفائه أو إظهاره. يتم تنفيذ تأثيرات الشفافية باستخدام طرق fadeOut () و fadeIn () و fadeTo () و fadeToggle ().

طرق fadeOut () و fadeIn () و fadeToggle () لها استخدامات مماثلة:

    fadeOut / fadeIn / fadeToggle (): طريقة بدون معلمات

    fadeOut / fadeIn / fadeToggle ([، التخفيف] [، كامل]). تحدد معلمة المدة المدة التي سيستغرقها تغيير تعتيم العنصر. بشكل افتراضي ، تبلغ قيمته 400 مللي ثانية.

    معامل التخفيف ، الذي يأخذ اسم وظيفة التخفيف كسلسلة. افتراضيا ، قيمته هي "البديل". يمكنك أيضًا استخدام قيمتي "بطيء" و "سريع" ، والتي تتوافق مع فترات تأثير تبلغ 600 و 200 مللي ثانية.

    تمثل المعلمة الكاملة وظيفة رد استدعاء يتم استدعاؤها بواسطة الطريقة عند انتهاء الرسوم المتحركة

طريقة fadeTo ، على عكس الطرق الأخرى ، تقبل أيضًا معلمة العتامة - فهي تأخذ قيمة يجب تغيير شفافية العنصر إليها: fadeTo (مدة ، عتامة [، تخفيف] [، مكتمل]). تتراوح قيمة العتامة من 0 (شفاف بالكامل) إلى 1 (مرئي بالكامل).

لنفترض أن لدينا صورة على الصفحة وزرين سيغيران شفافية هذه الصورة:


لاحظ أن طريقة fadeIn تزيد من الشفافية إلى القيمة التي كانت عليها قبل استخدام طريقة fadeOut ، وليس بالضرورة إلى 1. أي ، في هذه الحالة ، نظرًا لتطبيق طريقة fadeTo في البداية وتم تغيير الشفافية إلى 0.6 ، ستزيد طريقة fadeIn أيضًا من الشفافية حتى 0.6.