Jquery Stop Fadein/Fadeout

Question

यह एक काफी आसान है, लेकिन मुझे लगता है कि यह समझ में नहीं आता है।

असल में मेरे पास एक jquery होवर है जो एक div में fades और होवर पर दूसरे fades बाहर fades।

जब मैं जल्दी से कुछ बार चालू और बंद हो जाता हूं तो यह उन सभी फीका/फीड आउट को समाप्त करने के लिए लगभग 3-4 सेकंड तक दालों को आगे और आगे चलाता है।

मैं आम तौर पर इन चीजों को .stop() से रोकता हूं, लेकिन ऐसा लगता है कि यह चाल नहीं है। अगर में मैं an` $ ("। txtWrap") से पहले बटन बंद मंडराना मैं कैसे फीका को मार सकता है रोक() मंडराना (

$(".txtWrap").stop().hover(
    function() { 
    $(this).find('.txtBock').fadeOut(); 
    $(this).find('.txtDesc').fadeIn(); 

    }, 
    function() { 
    $(this).find('.txtBock').fadeIn(); 
    $(this).find('.txtDesc').fadeOut(); 
    } 
) 

Answer 1

आपका stop() गलत है

इस प्रयास करें।।।:

$(".txtWrap").hover(
    function() { 
    $(this).find('.txtBock').stop().fadeOut(); 
    $(this).find('.txtDesc').fadeIn(); 
    // $('#timeTxt').fadeOut(); 
    // $('#timeTxtDesc').fadeIn(); 

    }, 
    function() { 
    $(this).find('.txtBock').fadeIn(); 
    $(this).find('.txtDesc').stop().fadeOut(); 
    } 
) 

---

संपादित करें:

यह ई चेतन जाएगा तत्व छिपाने के बिना lements 'अस्पष्टता। यदि आप उन्हें छिपाना चाहते हैं, तो .hide() का उपयोग करें, आपको एनिमेट फ़ंक्शन में कॉलबैक जोड़ने की आवश्यकता होगी।

$(".txtWrap").hover(
    function() { 
    $(this).find('.txtBock').stop().animate({opacity:0}, 500); 
    $(this).find('.txtDesc').animate({opacity:1}, 500); 
    // $('#timeTxt').fadeOut(); 
    // $('#timeTxtDesc').fadeIn(); 

    }, 
    function() { 
    $(this).find('.txtBock').animate({opacity:1}, 500); 
    $(this).find('.txtDesc').stop().animate({opacity:0}, 500); 
    } 
) 

Answer 2

इस तरह के दिनों में मैं ब्रायन Cherne की प्रतिभा .hoverIntent() plugin की ओर रुख - यह काफी चिकनी है ... इंतजार कर रहा है जब तक उपयोगकर्ता को क्रियान्वित करने से पहले पर्याप्त नीचे धीमी कर दी है। आप इसे अपनी जरूरतों के अनुसार कॉन्फ़िगर कर सकते हैं।

बस प्लगइन शामिल हैं (यह इतना छोटा हो कि मैं कभी कभी यह लगा देंगे सीधे मेरी स्क्रिप्ट फ़ाइल में है) तो शब्द Intent जोड़ें:

$(".txtWrap").hoverIntent(
    function() { 
    $(this).find('.txtBock').fadeOut(); 
    $(this).find('.txtDesc').fadeIn(); 

    }, 
    function() { 
    $(this).find('.txtBock').fadeIn(); 
    $(this).find('.txtDesc').fadeOut(); 
    } 
) 

Answer 3

मैं जब superintelligent अतः खोज के बारे में एक समान प्रश्न पोस्ट करने के लिए था इंजन ने मेरे लिए इस सवाल को हाइलाइट किया, इसलिए मैंने सोचा कि मैं जन्म के लिए अपना स्वयं का समाधान पोस्ट करूंगा।

मैंने उपयोगकर्ता 113716 का समाधान लिया और इसे थोड़ा सा बाहर निकाला। मेरे मामले में, div मैं छुपा और दिखा गया था display:none के रूप में शुरू, तो मैं सीएसएस के लिए opacity:0 जोड़ सकते हैं और jQuery बता .css({display:block}) स्थापित करने के लिए इससे पहले कि यह 1 को अस्पष्टता एनिमेट में फीका करने के लिए शुरू कर दिया जाना था।

पर फीका हुआ, मुझे इसकी आवश्यकता नहीं थी, लेकिन मैंने अस्पष्टता को शून्य करने के बाद .hide() div पर कॉलबैक जोड़ा था।

यहाँ एक बेला को दर्शाता हुआ कि मैं क्या साथ समाप्त हो गया है:

http://jsfiddle.net/mblase75/wx2MJ/

प्रासंगिक जावास्क्रिप्ट:

$('li').mouseover(function() { 
    $(this).addClass('hover'); 
    $('#' + $(this).data('divid')).stop().css({ 
     display: 'block' 
    }).animate({ 
     opacity: 1 
    }, 500); 
}); 

$('li').mouseout(function() { 
    $(this).removeClass('hover'); 
    $('#' + $(this).data('divid')).stop().animate({ 
     opacity: 0 
    }, 500, function() { 
     $(this).hide(); 
    }); 
}); 

Answer 4

सोचा मैं इस पोस्ट क्योंकि इन उत्तरों से कोई भी मेरे लिए काम किया जाएगा।

* सच पैरामीटर कतार स्पष्ट और एनीमेशन के अंत में जाने के लिए रोक बता

$(".txtWrap").stop().hover(
    function() { 
    $(this).find('.txtBock').stop(true, true).fadeOut(); 
    $(this).find('.txtDesc').fadeIn(); 

    }, 
    function() { 
    $(this).find('.txtBock').fadeIn(); 
    $(this).find('.txtDesc').stop(true, true).fadeOut(); 
    } 
) 

लिंक: http://forum.jquery.com/topic/jquery-hover-events-cant-keep-up-with-fadein-and-fadeout-events-queue

Answer 5

आप इस बात है, तो:

$("#frase1").fadeIn(5000, function(){ 
    $("#frase2").fadeIn(10000, function(){ 
     $("#frase3").fadeIn(15000, function(){ 

     }); 
    }); 
}); 

सभी

ठीक है, आपको इस निर्देश का उपयोग फीडइन या कतार में अन्य घटना को रीसेट करने के लिए करना होगा:

$("#frase1").stop(false,true, true); 
$("#frase2").stop(false,true, true); 
$("#frase3").stop(false,true, true);