JQuery Arrêter Fadein / Fadeout
C'est assez facile, mais je ne peux pas semblent le comprendre.
Fondamentalement, j'ai un hover jquery qui s'estompe dans un div et s'estompe l'autre en survolant.
Quand je passe rapidement en mode Marche / Arrêt quelques fois, il Pulse d'avant en arrière pendant environ 3-4 secondes pour terminer tous ces fade in / Fade outs.
J'arrête généralement ces choses avec .stop(), mais il ne semble pas faire l'affaire ici. Comment puis-je tuer le fondu si je survole le bouton avant le un`$(".txtWrap").arrêter().passez la souris(
$(".txtWrap").stop().hover(
function () {
$(this).find('.txtBock').fadeOut();
$(this).find('.txtDesc').fadeIn();
},
function () {
$(this).find('.txtBock').fadeIn();
$(this).find('.txtDesc').fadeOut();
}
)
5 réponses
Votre stop() est mal placée.
Essayez ceci:
$(".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();
}
)
Modifier:
Cela va animer l'opacité des éléments sans masquer l'élément. Si vous voulez les cacher, utilisez .hide() vous devrez ajouter un rappel à la fonction 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);
}
)
Je pensais poster ceci parce qu'aucune de ces réponses ne fonctionnait pour moi.
*les vrais paramètres indiquent stop 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
Dans des moments comme celui-ci, je me tourne vers le génie de Brian Cherne .hoverIntent() plugin - c'est assez lisse...attend que l'utilisateur ait suffisamment ralenti avant de l'exécuter. Vous pouvez le configurer à vos besoins.
Incluez simplement le plugin (c'est assez court je le placerai parfois directement dans mon fichier de script) puis ajoutez le mot Intent:
$(".txtWrap").hoverIntent(
function () {
$(this).find('.txtBock').fadeOut();
$(this).find('.txtDesc').fadeIn();
},
function () {
$(this).find('.txtBock').fadeIn();
$(this).find('.txtDesc').fadeOut();
}
)
J'étais sur le point de poster une question similaire lorsque le moteur de recherche superintelligent SO a mis en évidence cette question pour moi, alors j'ai pensé poster ma propre solution pour la postérité.
J'ai pris la solution de user113716 et l'ai étoffée un peu. Dans mon cas, la div que je cachais et montrais a commencé comme display:none, donc j'ai dû ajouter opacity:0 au CSS et dire au jQuery de définir .css({display:block}) avant de commencer à animer l'opacité à 1 pour s'estomper.
Sur le fondu, Je n'avais pas besoin de cela, mais j'ai ajouté un rappel à .hide() Le div après avoir animé l'opacité à zéro.
Voici un violon illustrant ce que j'ai fini avec:
Http://jsfiddle.net/mblase75/wx2MJ/
Le JavaScript pertinent:
$('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();
});
});
Si vous avez cette chose:
$("#frase1").fadeIn(5000, function(){
$("#frase2").fadeIn(10000, function(){
$("#frase3").fadeIn(15000, function(){
});
});
});
Très bien, 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);