延遲懸停動畫

Question

我的代碼是：

$(document).ready(function() { 
    $('.holder').hover(function() { 
     $(this).find('.heading').slideUp(); 
    },function() { 
     $(this).find('.heading').slideDown(); 
    }); 
}); 

現在我要實現的功能setTimeout。但問題可能是$(this)

Answer 1

只儲存$(this)在變量和使用該變量的匿名函數中：

$(document).ready(function() { 
    $('.holder').hover(function() { 
     var $self = $(this); 
     setTimeout(function(){ 
      $self.find('.heading').slideUp(); 
     }, 500); 
    },function() { 
     $(this).find('.heading').slideDown(); 
    }); 
}); 

編輯在迴應評論：

$(document).ready(function() { 
    var timer; 
    $('.holder').hover(function() { 
     var $self = $(this); 
     timer = setTimeout(function(){ 
      timer = false; 
      $self.find('.heading').slideUp(); 
     }, 2000); 
    },function() { 
     if(timer){ 
      clearTimeout(timer); 
      timer = false; 
     }else{ 
      $(this).find('.heading').slideDown(); 
     } 
    }); 
}); 

Answer 2

如果您想等下滑下來，你可以這樣做：

$(document).ready(function() { 
    $('.holder').hover(function() { 
     $(this).find('.heading').slideUp(); 
    },function() { 
     var me = this; 
     setTimeout(function() { $(me).find('.heading').slideDown(); }, 1000); 
    }); 
}); 

Answer 3

no setTimeout needed。

http://jsfiddle.net/v6pmv/

$(this).find('.heading').delay(1000).slideUp(); 

Answer 4

在給定的，如果鼠標懸停元素穿過多次，該行動將級聯的開啓和關閉的怪胎的所有解決方案。

嘗試在每次懸停時取消超時。例如：

function slideHover() 
{ 
    jqHolder = $('.holder'); 
    var time = jqHolder.data('time'); 
    if (time) 
    { 
     clearTimeout(time); 
    } 
    time = setTimeout(function() { 
     jqHolder.find('.heading').slideToggle(); 
    }, jqHolder.is(':hidden') ? 0 : 500); 
    jqHolder.data('time',time); 
} 

$(document).ready(function() { 
    $('.holder').hover(slideHover, slideHover); 
});