задержка () или таймаут с остановкой ()? - PullRequest
Новая
       5

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

20 голосов
/ 25 июля 2010 
$('.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 не должен запуститься. Получить меня?

Не знаю, как это сделать, есть идеи?

Ответы [ 4 ]

25 голосов
/ 25 июля 2010

Вам необходимо использовать 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');
});

Вы можете попробовать его здесь .

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

4 голосов
/ 06 декабря 2012

Я искал ответ на похожий вопрос и обнаружил, что .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');
});
3 голосов
/ 25 июля 2010

Используйте функцию 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).

0 голосов
/ 13 апреля 2012

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

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

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

...