jquery .animate() - 这个代码可以做我想要的答案

【问题标题】：jquery .animate() - this code sort of does what i wantjquery .animate() - 这个代码可以做我想要的
【发布时间】：2011-06-04 16:26:24
【问题描述】：

当鼠标移到其上方的另一个 div 上时，我试图让 div 向下滑动。基本上它上面的 div 只是让 div 向下滑动的触发器。 .trigger 的鼠标悬停使 .slidedown 展开，而 .slidedown 的 mouseout 使自身向上滑动。这是我到目前为止的代码：

$(文档).ready(函数() { $('.slidedown').hide(); //鼠标悬停时 $('.trigger').mouseover(function(){ $('.slidedown').stop().animate({ 高度：['切换'，'摆动']， }, 600, 函数() { // 动画完成。 }); }); //鼠标移开时 $('.slidedown').mouseout(function(){ $('.slidedown').stop().animate({ 高度：'0px' }, 600, 函数() { // 动画完成。 }); }); });

这可行，但我需要帮助的只有两个柚木。首先，在 mouseout 和 .slidedown div 向上滑动并消失之后，如果我再次将鼠标悬停在 .trigger div 上，则没有任何反应。它应该使 .slidedown 再次向下移动。我每次都需要它来继续工作。我尝试删除 .stop() 但它仍然不起作用。

如果鼠标移出 .trigger 但仅当它没有移出 .trigger 进入 .slidedown 时，我是否也可以让它向上滑动？如果用户没有将鼠标移动到 .slidedown 中，那么它会永远保持下去，这是不好的。或者只是有一个时间限制，如果鼠标没有移到 .slidedown 上，它可以保持展开。

其次，有没有办法在鼠标移出和 div 向上滑动之间延迟大约 1 秒？感谢您的帮助！

【问题讨论】：

标签： javascript jquery html animation

【解决方案1】：

您可以尝试使用 jQuery hover 事件。对于延迟，您可以将关闭动画放在setTimeout：

$(document).ready( function(){
  $('.trigger').hover( function(){ // enter animation

    $('.slidedown').stop(true,true).animate({
        height: ['toggle', 'swing'],
        }, 600, function() { /* animation done */ });

    }, function(){ // leave animation

    setTimeout( function(){
      $('.slidedown').stop(true,true).animate({
        height: '0px',
        }, 600, function() { /* animation done */ });
    }, 1000 );

  });
});

您还可以查看 hoverIntent plug-in 以更细致地控制 mouseenter/mouseleave 行为，包括时间。

【讨论】：

【解决方案2】：

我想您会发现在$('.trigger').mouseover() 中设置数字高度可能有助于动画的可重复性。仅供参考，您可以在 jQuery 中为高度或宽度等设置一个整数，它会自动为您设置单位为 px。

正如 Ken 所指出的，setTimeout 对于延迟代码很有用，但请将其保留在您的 $('.slidedown').mouseout() 事件中，否则 slideown div 将在您将鼠标移出 trigger div 后隐藏，而不是在您离开 @ 时隐藏987654325@你指定的div。

【讨论】：