延迟悬停动画

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

不需要setTimeout。

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);
});