मेरे पास निम्न कोड है जो एक स्लाइड शो दिखाता है। मेरी समस्या यह है कि अगले तत्व (फीका हुआ) ऐपियर से पहले एक तत्व पूरी तरह छुपा नहीं जाता है, जिससे मुझे सीएसएस के साथ इसे ठीक करना पड़ता है, जो आदर्श परिदृश्य नहीं है .. यह कोड है:
setInterval(function() {
$("#slides > li:first")
.fadeOut(500)
.next()
.fadeIn(500)
.end()
.appendTo("#slidelist");
}, 2000);
मैंने बिना सफलता के निम्नलिखित प्रयास किए हैं:
setInterval(function() {
$("#slides > li:first")
.fadeOut(500).delay(500)
.next()
.fadeIn(500)
.end()
.appendTo("#slidelist");
}, 2000);
किसी भी विचार से अगले तत्व में इससे पहले कि तत्व पूरी तरह से फीका हो सकता है?
उत्तर:
जवाब के लिए 0 № 1यदि आप fadeIn को अपने बाद शुरू करना चाहते हैंपिछला फीका आउट खत्म होता है, fadeIn निष्पादित करने के लिए कॉलबैक फ़ंक्शन पैरामीटर का उपयोग करें। पहली क्रिया (फीडऑट) पूर्ण होने के बाद कॉलबैक फ़ंक्शन निष्पादित होगा।
यहां 2 divs - 1 fading out का एक उदाहरण है, फिर 1 लुप्त हो गया। मैंने अस्पष्टता पर एनिमेट फ़ंक्शन का उपयोग किया, जो अनिवार्य रूप से fadeIn / fadeOut जैसा ही है।
चेतन: http://api.jquery.com/animate/
फेड आउट: http://api.jquery.com/fadeout/
में फीका: http://api.jquery.com/fadein/
jsfiddle: http://jsfiddle.net/biz79/du9utty8/
var $divs = $("div");
$divs.eq(0).animate( {"opacity":"0"},1000 , function() {
$divs.eq(1).animate( { "opacity":"1" },1000)
})
उम्मीद है कि आप इस समाधान को लागू करने के लिए अपने कोड को संशोधित कर सकते हैं। यदि नहीं, तो एक पहेली पोस्ट करें और मुझे बताएं, और मैं आपके कोड को समायोजित करने में मदद कर सकता हूं।