如何使用jQuery延迟动画

Question

我有一个链接。当我将鼠标悬停在上面时，应该有1-2秒的延迟，之后会出现div。当我将鼠标悬停在它上面时，应该保留div。

如果我没有在链接或div上悬停，div应在1-2秒的延迟后消失。

我不知道如何做到这一点。有人可以帮忙吗？我试图实现的目标与谷歌播放网站预览的方式类似。

var formHide; 
$('.toggleDisForm').hover(function() { 
    var form = $(this).parents("li").find(".dispenserForm"); 
    function showIt() { 
     form.fadeIn(); 
    } 
    show = setTimeout(showIt, 1000); 
    clearTimeout(formHide); 
}, function() { 
    var form = $(this).parents("li").find(".dispenserForm"); 
    function hideIt() { 
     form.fadeOut(); 
    } 
    clearTimeout(show); 
    hideDispen = setTimeout(hideIt, 1000); 
    $('.dispenserForm').not(form).hide(); 
}); 

var hideDispen; 
$('.dispenserForm').hover(function() { 
    $('.dispenserForm').not(this).hide(); 
    clearTimeout(hideDispen); 
}, function() { 
    var form = $(this); 
    function showMe() { 
     form.show(); 
    } 
    formHide = setTimeout(showMe, 1000); 
}); 

她是标记

<ul class="clearfix">  
    <li> 
     <div class="inner"> 
      <a class="toggleDisForm" href="#">hover 
         <div class="dispenserForm"> 
       The div that should appear 
        </div> 
        </a> 
     </div> 

    </li> 

    <li> 
     <div class="inner"> 
      <a class="toggleDisForm" href="#">hover 
         <div class="dispenserForm"> 
       The div that should appear 
        </div> 
        </a> 
     </div> 
    </li> 

    <li> 
     <div class="inner"> 
      <a class="toggleDisForm" href="#">hover 
         <div class="dispenserForm"> 
       The div that should appear 
        </div> 
        </a> 
     </div> 
    </li> 

    etc...  
</ul> 

Answer 1

你已经张贴，因为里面的setTimeout代码是在全球范围内运行不正常的代码。 this不再指代同样的事情了。尝试是这样的：

$('.toggleDisForm').hover(function() { 
    var form = $(this).parents("li").find(".dispenserForm"); 
    function showIt() { 
     form.show(); 
    } 
    show = setTimeout(showIt, 2000); 
}, function() { 
    clearTimeout(show); 
    $('.dispenserForm').hide(); 
}); 

一般来说，最好的做法是setTimeout的这种方式使用（用函数，而不是一个字符串）。

编辑：回应你的评论，让我们看看我们是否可以让它在显示后稍微挂一点。

var formHide; 
$('.toggleDisForm').hover(function() { 
    var form = $(this).parents("li").find(".dispenserForm"); 
    function showIt() { 
     form.show(); 
    } 
    show = setTimeout(showIt, 2000); 
    clearTimeout(formHide); 
}, function() { 
    var form = $(this).parents("li").find(".dispenserForm"); 
    function hideIt() { 
     form.hide(); 
    } 
    clearTimeout(show); 
    hide = setTimeout(hideIt, 1500); 
    $('.dispenserForm').not(form).hide(); 
}); 
$('.dispenserForm').hover(function() { 
    $('.dispenserForm').not(this).hide(); 
    clearTimeout(hide); 
}, function() { 
    var form = $(this); 
    function hideMe() { 
     form.hide(); 
    } 
    formHide = setTimeout(hideMe, 500); 
}); 

这是否行得通？

Answer 2

你的动画之前，只需使用.delay。像这样

$(foo).delay(2000).show(200); 

，记得使用.stop行动，以避免动画

Answer 3

使用定时器，最彻底的方法，因为它允许使用者如果从你的链接移开您可以轻松地清除定时器的队列。

$('.yourLink').hover(function() { 
    show = setTimeout('$("#yourDiv").show();', 2000); 
}, function() { 
    clearTimeout(show); 
    $('#yourDiv').hide(); 
}); 

这只是我的实现;你正在寻找的是一个工具提示功能，并且有很多非常棒的工具提示插件。我建议使用其中之一。

编辑：Jan的实施也有效，只有一个小小的警告; .delay（）工作，命令只是动画。这只是意味着你不能使用.show（）W/O投入的延迟时间：

$('a').hover(function() { 
    $("div").delay(2000).show(1); 
}, function() { 
    $('div').stop(true,true).hide(); 
});