Jquery Stop Fadein/Fadeout

Question

Questo è abbastanza facile, ma non riesco a capirlo.

Fondamentalmente ho un hover jquery che si dissolve in un div e svanisce l'altro su hover.

Quando si passa rapidamente avanti e indietro alcune volte, pulsa avanti e indietro per circa 3-4 secondi per completare tutte quelle dissolvenze in entrata/in uscita.

In genere fermo queste cose con .stop(), ma sembra che non faccia il trucco qui. Come posso uccidere la dissolvenza in se mi passa il mouse dal pulsante prima che l'an` $ ("txtWrap.") Stop() hover (

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

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

Answer 1

tuo stop() è fuori luogo

Prova questo...:

$(".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(); 
    } 
) 

---

EDIT:

Questo animerà la posta l'opacità dei lements senza nascondere l'elemento. Se vuoi che siano nascosti, usa .hide() dovrai aggiungere un callback alla funzione animate.

$(".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

In momenti come questo mi rivolgo al genio di Brian Cherne .hoverIntent() plugin - E 'abbastanza liscia ... attende che l'utente ha rallentato a sufficienza prima di eseguire. Puoi configurarlo in base alle tue esigenze.

Proprio includono il plugin (è abbastanza breve sarò a volte inserirlo direttamente nel mio file di script), quindi aggiungere la parola Intent:

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

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

Answer 3

Stavo per inviare una domanda simile quando il superintelligente SO cercare motore ha evidenziato questa domanda per me, quindi ho pensato di pubblicare la mia soluzione per i posteri.

Ho preso la soluzione di user113716 e l'ho arricchita un po '. Nel mio caso, il div mi nascondevo e che mostra iniziato come display:none, quindi ho dovuto aggiungere opacity:0 al CSS e dire al jQuery per impostare .css({display:block}) prima che iniziasse animare l'opacità a 1 a svanire in.

Sul svanisce, non ne ho avuto bisogno, ma ho aggiunto una richiamata allo .hide() div dopo aver animato l'opacità a zero.

Ecco un violino che illustrano ciò che ho finito con:

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

Il relativo JavaScript:

$('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

pensato che avrei pubblicare questo perché nessuna di queste risposte ha lavorato per me.

* I veri params dicono ferma per cancellare la coda e andare alla fine dell'animazione

$(".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(); 
    } 
) 

Link: http://forum.jquery.com/topic/jquery-hover-events-cant-keep-up-with-fadein-and-fadeout-events-queue

Answer 5

Se si dispone di questa cosa:

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

     }); 
    }); 
}); 

tutto corretto, è necessario utilizzare questa istruzione per ripristinare fadeIn o altri eventi in coda:

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