Задержка() или таймаут с остановкой()?

Question

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

Я хочу, чтобы функция mouseenter имела stop() и задержку в 1 секунду. Итак, если я нахожусь над #download, то fadeIn должен начинаться после 1 секунды задержки. Если я вытаскиваю, то fadeIn не должен запускаться. Поймай меня?

Я действительно не знаю, как это сделать, любые идеи?

Answer 1

В этом случае необходимо использовать setTimeout() из-за того, как работает .delay() (и ваша неспособность отменить его).

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

Если вы используете .delay(), это приведет к деактивации следующей анимации для элемента, , независимо от того, была ли вы ранее убрана эта очередь. Поэтому вам нужен тайм-аут, который вы получите может отмените, что вышесказанное делает, вручную вызывая setTimeout() и сохраняя результат с $.data(), чтобы вы могли его очистить позже, через clearTimeout().

Answer 2

использовать функцию 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 будет выполнять код внутри функции после указанных миллисекунды (в данном случае 1000).

Answer 3

вы можете использовать это на jquery без использования события задержки.

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

1000 - это ваше время, когда после него $ ('# download') исчезнет.

Answer 4

Я искал ответ на подобный вопрос, и я обнаружил, что .animate() также может быть использован для обработки этого, и он подчиняется .stop()

Это будет выглядеть примерно так:

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