जावास्क्रिप्ट और सीएसएस का उपयोग करके फ़ेड-इन और फ़ेड-आउट

HTML तत्वों के लिए फ़ेड-इन और फ़ेड-आउट प्रभाव बनाने से इसे बढ़ाया जा सकता है वेब अनुप्रयोगों की दृश्य अपील. हालाँकि, इन प्रभावों को लागू करना कभी-कभी चुनौतीपूर्ण हो सकता है, खासकर जब फ़ेड-इन फ़ंक्शन सही ढंग से काम नहीं कर रहा हो।

पिछले कार्यान्वयन में, फ़ेड-इन फ़ंक्शन अपेक्षा के अनुरूप तत्व की अस्पष्टता को नहीं बढ़ा रहा था। इसके बजाय, यह 0.1 पर अटका रहा। इस समस्या के समाधान के लिए, हम एक अधिक कुशल विधि प्रदान करते हैं:

function unfade(element) {
    var op = 0.1;  // initial opacity
    element.style.display = 'block';
    var timer = setInterval(function () {
        if (op >= 1) { // If opacity reaches 1
            clearInterval(timer);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity='   op * 100   ")";
        op  = op * 0.1;
    }, 10);
}

यह फ़ंक्शन 0.1 की प्रारंभिक अपारदर्शिता के साथ शुरू होता है और धीरे-धीरे इसे 1.0 तक पहुंचने तक बढ़ाता है, जिसके परिणामस्वरूप एक सहज फीका-इन प्रभाव होता है।

फेड-आउट के लिए, हम उपरोक्त कोड को बदल देते हैं इसके साथ:

function fade(element) {
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op 
यह फ़ंक्शन 0.1 तक पहुंचने तक लगातार अस्पष्टता को कम करता है, फिर वांछित फीका-आउट प्रभाव बनाने के लिए तत्व को छुपाता है।
याद रखें, सेटइंटरवल के लिए तर्क के रूप में स्ट्रिंग का उपयोग करने से बचना आवश्यक है या उनके संभावित सुरक्षा जोखिमों के कारण सेटटाइमआउट।