जावास्क्रिप्ट के साथ पृष्ठभूमि छवियों को फीका करना

पृष्ठभूमि के रंग को फीका करने के विपरीत, पृष्ठभूमि छवि को फीका करना jQuery के साथ एक सीधा काम नहीं है। ऐसा इसलिए है क्योंकि पृष्ठभूमि छवियों को DOM में तत्वों के रूप में नहीं, बल्कि CSS गुणों के रूप में माना जाता है। पृष्ठभूमि छवि का भ्रम. इन छवियों को डिफ़ॉल्ट रूप से छिपाकर और उन्हें jQuery के साथ अंदर और बाहर फीका करके, हम पृष्ठभूमि छवि को फीका करने के प्रभाव का अनुकरण कर सकते हैं।

इसे चरण-दर-चरण कैसे करें यहां बताया गया है:

1. अपने HTML में टैग जोड़ें:

प्रत्येक पृष्ठभूमि छवि के लिए एक टैग जोड़ें जिसे आप फीका करना चाहते हैं। उन्हें बिल्कुल सही स्थिति में रखें और उन्हें अन्य सभी तत्वों के पीछे रखने के लिए एक नकारात्मक z-सूचकांक दें:

img { स्थिति: निरपेक्ष; z-सूचकांक: -1; कुछ भी डिस्प्ले मत करो; }

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

2. jQuery कोड लिखें:

टैग के माध्यम से पुनरावृति करने और उन्हें क्रम में अंदर और बाहर फीका करने के लिए jQuery की प्रत्येक() विधि का उपयोग करें। यहां एक उदाहरण है:

फ़ंक्शन फ़ेडइमेज() { $('img').प्रत्येक(फ़ंक्शन(सूचकांक) { $(यह) ।छिपाना() .delay(3000 * इंडेक्स) // प्रत्येक छवि को 3 सेकंड तक विलंबित करें .फेडइन(3000) ।फेड आउट() }); }

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

3. फ़ंक्शन को कॉल करें:

फ़ेडिंग प्रक्रिया शुरू करने के लिए फ़ेडइमेज() फ़ंक्शन को कॉल करें।

कार्यशील उदाहरण के लिए, http://jsfiddle.net/ पर लाइव डेमो देखें RyGKV/