Verzögerung() oder Timeout mit Stop()?

Question

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

Ich möchte die mouseenter Funktion eine stop() und eine Verzögerung von 1 Sekunde haben. Also, wenn ich schweben über #download sollte die fadeIn nach einer 1 Sekunde Verzögerung starten. Wenn ich mouse out sollte der fadeIn nicht starten. Fang mich?

Ich weiß nicht wirklich, wie man das macht, irgendwelche Ideen?

Answer 1

Sie müssen in diesem Fall setTimeout() verwenden, weil .delay() funktioniert (und Ihre Unfähigkeit, es abzubrechen).

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

Wenn Sie .delay() verwenden, wird die nächste Animation für das Element entfernt, unabhängig davon, ob Sie diese Warteschlange früher gelöscht haben. Sie benötigen also eine Zeitüberschreitung, die Sie können Abbrechen, was das obige geschieht, indem Sie setTimeout() manuell aufrufen und das Ergebnis mit $.data() speichern, so dass Sie es später löschen können, über clearTimeout().

Answer 2

eine Funktion 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 verwenden wird, den Code innerhalb der Funktion nach dem angegebenen miliseconds (in diesem Fall 1000) auszuführen.

Answer 3

können Sie dies auf jQuery ohne Verzögerung Ereignis verwenden.

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

1000 ist Ihre Zeit, die es nach $ ('# download') verblassen wird.

Answer 4

Ich war für die Antwort auf eine ähnliche Frage suchen, und ich fand, dass .animate() könnte auch verwendet werden, um dies zu handhaben, und es gehorcht .stop()

Es ist etwas würde wie folgt aussehen:

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