jquery - 延迟悬停动画

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