opóźnienie() lub limit czasu z zatrzymaniem()?

Question

$('.file a').live('mouseenter', function() { 
    $('#download').stop(true, true).fadeIn('fast'); 
}).live('mouseleave', function() { 
    $('#download').stop(true, true).fadeOut('fast'); 
}); 

Chcę, aby funkcja mouseenter miała stop() i opóźnienie o 1 sekundę. Tak więc, jeśli umieściłem kursor myszy nad #download, fadeIn powinien rozpocząć się po 1 sekundowym opóźnieniu. Jeśli jednak wyłączysz mysz, fadeIn nie powinien się uruchomić. Daj mi?

Naprawdę nie wiem, jak to zrobić, jakieś pomysły?

Answer 1

Musisz użyć setTimeout() w tym przypadku, ponieważ działa .delay() (i nie można go anulować).

$('.file a').live('mouseenter', function() { 
    $.data(this, 'timer', setTimeout(function() { 
     $('#download').stop(true, true).fadeIn('fast'); 
    }, 1000)); 
}).live('mouseleave', function() { 
    clearTimeout($.data(this, 'timer')); 
    $('#download').stop(true, true).fadeOut('fast'); 
}); 

You can give it a try here.

Jeśli użyjesz .delay(), usuniesz kolejną animację elementu, , niezależnie od tego, czy wyczyściłeś tę kolejkę wcześniej:. Potrzebujesz więc limitu czasu, który możesz anulować ,, co oznacza, że ​​ręcznie dzwonisz pod numer setTimeout() i zapisujesz wynik za pomocą $.data(), dzięki czemu możesz go skasować później, poprzez clearTimeout().

Answer 2

użycie funkcji setTimeout

$('.file a').live('mouseenter', function() { 
setTimeout(function(){ 
    $('#download').stop(true, true).fadeIn('fast'); 
}, 1000); 
}).live('mouseleave', function() { 
    $('#download').stop(true, true).fadeOut('fast'); 
}); 

setTimeout wykona kod wewnątrz funkcji Po podanym milisekund (w tym przypadku 1000).

Answer 3

można użyć tego na jquery bez użycia zdarzenia opóźnienia.

$('.file a').hover(function() { 
    time = setTimeout(function() { 
    $('#download').fadeIn(); 
    },1000); 
},function(){ 
    clearTimeout(time); 
}); 

1000 to twój czas, po którym $ ("# download") zniknie.

Answer 4

szukałem odpowiedzi na podobne pytanie, i stwierdziliśmy, że .animate() może być również używany do obsługi tego, a ona słucha .Zatrzymaj()

będzie to wyglądać mniej więcej tak:

$('.file a').live('mouseenter', function() { 
    $('#download') 
     .stop(true, true) 
     .animate({opacity:0}, 1000);   // one second delay 
     .animate({opacity:1}, 'fast', 'swing'); 
}).live('mouseleave', function() { 
    $('#download') 
     .stop(true, true) 
     .animate({opacity:0}, 'slow', 'swing'); 
});