延迟悬停动画[重复]答案

【问题标题】：Delay hover animation [duplicate]延迟悬停动画[重复]
【发布时间】：2013-08-23 21:35:05
【问题描述】：

我的代码是：

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

现在我想实现setTimeout 函数。但问题可能出在$(this)

【问题讨论】：

你想延迟什么？
如果你只是想延迟滑动功能，jQuery 有相应的方法：api.jquery.com/delay

标签： jquery settimeout

【解决方案1】：

只需将$(this) 存储在一个变量中，然后在您的匿名函数中使用该变量：

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

编辑回应 cmets：

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

【讨论】：

如果我想为 .hover() 设置超时时间？
@user1830414 你这是什么意思？您想在 DOM 准备好后延迟悬停事件处理程序的绑定？
是的，这就是我想要的
@user1830414 我编辑了它。我仍然不太确定我是否了解您想要什么，但请尝试一下。
@user1830414 哦，我明白你在说什么了！我会再次更新。

【解决方案2】：

如果你想等待滑下来，你可以这样做：

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

【讨论】：

【解决方案3】：

不需要 setTimeout。

http://jsfiddle.net/v6pmv/

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

【讨论】：

【解决方案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);
});

【讨论】：