web-dev-qa-db-fra.com

Puis-je utiliser .delay () avec .animate () dans jQuery?

J'ai ce code, qui ouvre un aperçu du panier sur un site Web sur lequel je travaille. Il reste ouvert si l'utilisateur passe dessus, mais je veux qu'il ait un délai de deux secondes avant que le rappel de mon survol ne soit déclenché. C'est juste au cas où l'utilisateur ne voudrait pas que la souris quitte la zone du panier.

Voici le code que j'utilise pour animer le panier:

$('.cart_button, .cart_module').hover(function(){
    $(".cart_module").stop().animate({top:'39px'},{duration:500});
}, function(){
    $('.cart_module').stop().animate({top: -cartHeight},{duration:500})
});

Voici le code que j'ai essayé d'utiliser, mais qui n'a eu aucun effet:

$('.cart_button, .cart_module').hover(function(){
    $(".cart_module").delay().animate({top:'39px'},{duration:500});
}, function(){
    $('.cart_module').delay().animate({top: -cartHeight},{duration:500})
});
jqueryjquery-animatedelay
17
Henryz

J'ai toujours géré ce genre de choses à l'aide des fonctions de base setTimeout et clearTimeout js.

Voici un exemple sur jsFiddle

Jetez un oeil à plugin jquery.hoverIntent aussi, il vous donne un délai d'attente sur les événements de survol et de sortie

3
gpasci

Si vous ajoutez l'arrêt avant le délai, cela fonctionne très bien:

$('.cart_button, .cart_module').hover(function() {
    $('.cart_module').stop(true, true).delay(100).animate({top:'39px'}, 400);
  },
  function() {
    $('.cart_module').stop(true, true).animate({top: -cartHeight}, 250);
});
26
Chango

Il semble qu'il y ait eu des mises à jour de jQuery dans cette veine depuis 2011. Dans Chrome je peux utiliser ces appels sans délai:

$('.thing').hover(function(){
    $(".thing").delay(2000).animate({top:'39px'},{duration:500});
}
7
cbmtrx

Combien de temps voulez-vous qu'il retarde pour ????

$('.cart_button, .cart_module').hover(function(){
            $(".cart_module").delay(2000).animate({top:'39px'},{duration:500}); //two seconds
        }, function(){
            $('.cart_module').delay(2000).animate({top: -cartHeight},{duration:500}) //two seconds 
    });
0
switz