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

延迟悬停动画

4 个答案: