تلاشي صور الخلفية باستخدام JavaScript

على عكس تلاشي لون الخلفية، فإن تلاشي صورة الخلفية ليس مهمة سهلة مع jQuery. وذلك لأن صور الخلفية لا يتم التعامل معها كعناصر في DOM، بل كخصائص CSS.

ومع ذلك، الحل البديل الذكي هو استخدام علامات ذات الموضع المطلق ومؤشر z السلبي لإنشاء وهم صورة الخلفية. من خلال إخفاء هذه الصور بشكل افتراضي وتلاشيها داخل وخارج باستخدام jQuery، يمكننا محاكاة تأثير تلاشي صورة الخلفية.

إليك كيفية القيام بذلك خطوة بخطوة:

1. أضف علامات إلى HTML الخاص بك:

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

img {
  position: absolute;
  z-index: -1;
  display: none;
}

2. اكتب رمز jQuery:

استخدم طريقة every() الخاصة بـ jQuery للتكرار خلال علامات وتلاشيها للداخل والخارج بالتسلسل. إليك مثال:

function fadeImages() {
  $("img").each(function(index) {
    $(this)
      .hide()
      .delay(3000 * index) // delay each image by 3 seconds
      .fadeIn(3000)
      .fadeOut()
  });
}

3. اتصل بالوظيفة:

استدعاء وظيفة FadeImages() لبدء عملية التلاشي.

للحصول على مثال عملي، راجع العرض التوضيحي المباشر على http://jsfiddle.net/ ريجكف/