क्लिक पर या देरी के बाद jQuery फीडआउट

Question

मैं एक वेबसाइट पर एक संदेश बॉक्स प्रदर्शित कर रहा हूं। मैं इसे या तो क्लिक पर या एक्स सेकंड के बाद फीडआउट करने में सक्षम होना चाहता हूं। समस्या यह है कि delay() फ़ंक्शन click() फ़ंक्शन पर जगह लेता है ताकि आप इसे बंद कर सकें, फिर भी आपको समय का इंतजार करना पड़ेगा।

यहाँ jQuery

$(document).ready(function() {  
$(".close-green").click(function() { 
     $("#message-green").fadeOut("slow"); 
    }); 

    //fade out in 5 seconds if not closed 
    $("#message-green").delay(5000).fadeOut("slow"); 

}) 

मैं भी एक साधारण jsfiddle की स्थापना की है। समस्या टिप्पणी बाहर देरी लाइन देखने के लिए http://jsfiddle.net/BandonRandon/VRYBk/1/

Answer 1

आप एक setTimeout के लिए इसे बदल देना चाहिए: http://jsfiddle.net/VRYBk/3/

(jsfiddle कड़ी में) मैं अपने देरी लाइन हटा दिया और एक मानक setTimeout तरह से बदल दिया:

setTimeout(function(){ 
    $("#message-green").fadeOut("slow"); 
},5000) 

क्यों एक नोट के रूप में, क्योंकि जेएस नीचे से नीचे पढ़ा जाता है और यह ईवेंट क्लिक करने और ट्रिगर करने से पहले आपकी देरी को पढ़ेगा। इसलिए, जब भी आप देरी पर क्लिक करते हैं तो सभी एनीमेशन को रोकने के लिए चल रहा है।

Answer 2

यह jQuery 1.5 के नए Deferred वस्तुओं के लिए एक आदर्श उपयोग होगा: पर http://jsfiddle.net/Nyg4y/3/

ध्यान दें कि यह कोई बात नहीं

// a deferred object for later processing 
var def = $.Deferred(); 

// resolve the deferred object on click or timeout 
$(".close-green").click(def.resolve); 
setTimeout(def.resolve, 5000); 

// however the deferred object is resolved, start the fade 
def.done(function() { 
    $(".message-green").fadeOut("slow"); 
}); 

कार्य प्रदर्शन है कि अगर आप बटन टाइमर अभी भी प्रेस आग - def.resolve() पर दूसरी कॉल को अनदेखा किया जाता है।

Answer 3

मैं यह सबसे अच्छा समाधान का ऑस्कर Godson ने सुझाव दिया झरना, मैं किसी भी तरह यह करने के लिए इस कहा:

आप इसे एक setTimeout में बदल जानी चाहिए:

if (! $clicked.hasClass("search")) 
{ 
    setTimeout(function() 
    { 
     jQuery("#result").delay('1500').fadeOut('2800'); 
    },7000); 
} 
}); 

उनके मूल सुझाव बहुत उपयोगी है http://jsfiddle.net/VRYBk/3/

(jsfiddle लिंक में) मैंने आपकी देरी लाइन हटा दी और इसे मानक सेटटाइमआउट के साथ बदल दिया:

setTimeout(function(){ 
     $("#message-green").fadeOut("slow"); 
},5000) 

ऑस्कर Godson रखकर