Jquery Stop Fadein/Fadeout

Question

Ceci est un assez facile, mais je ne peux pas sembler le comprendre.

Fondamentalement, j'ai un vol stationnaire jquery qui se fane dans un div et disparaît l'autre au survol.

Lorsque je me mets brièvement en marche et en arrêt à quelques instants, il pulse d'avant en arrière pendant environ 3-4 secondes pour terminer tous ces fondus d'entrée/de sortie.

J'arrête généralement ces choses avec .stop(), mais cela ne semble pas faire l'affaire ici. Comment puis-je tuer le fondu si je passe la souris au large de la touche avant le vol stationnaire (

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

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

Answer 1

Votre stop() est mal placé $ de an` ("txtWrap.") Arrêt()

essayer...:

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

Cela animer l'e l'opacité des lments sans cacher l'élément. Si vous voulez les cacher, utilisez .hide(), vous aurez besoin d'ajouter un rappel à la fonction d'animation.

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

Dans des moments comme cela, je tour au génie de Brian Cherne .hoverIntent() plugin - Il est tout à fait en douceur ... attend jusqu'à ce que l'utilisateur a ralenti assez bas avant d'exécuter. Vous pouvez le configurer selon vos besoins.

Il suffit d'inclure le plug-in (il est assez court, je vais parfois le placer directement dans mon fichier de script), puis ajouter le mot Intent:

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

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

Answer 3

J'étais sur le point de poser une question similaire lorsque la superintelligent la recherche SO Le moteur a mis cette question en évidence pour moi, alors j'ai pensé que je posterais ma propre solution pour la postérité.

J'ai pris la solution de user113716 et je l'ai étoffée un peu. Dans mon cas, la div je me cachais et de montrer commencé comme display:none, donc je devais ajouter opacity:0 au CSS et dire au jQuery de mettre .css({display:block}) avant qu'il ait commencé animant l'opacité à 1 à fondu.

Sur la fondu, je n'ai pas besoin de cela, mais j'ai ajouté un rappel à .hide() la div après l'animation de l'opacité à zéro.

Voilà un violon illustrant ce que j'ai fini avec:

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

Le JavaScript concerné:

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

Je pensais que je posterais car aucune de ces réponses a fonctionné pour moi.

* Les vrais params disent arrêter pour effacer la file d'attente et aller à la fin de l'animation

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

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

Answer 5

Si vous avez cette chose:

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

     }); 
    }); 
}); 

tous à droite, vous devez utiliser cette instruction pour réinitialiser fadeIn ou un autre événement dans la file d'attente:

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