jquery .animate（）-这种代码有点我想要的

Question

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

$(document).ready(function() {
 $('.slidedown').hide(); 
 //When mouse rolls over
  $('.trigger').mouseover(function(){ 
   $('.slidedown').stop().animate({
   height: ['toggle', 'swing'],
  }, 600, function() {
    // Animation complete.
  });
});

    //When mouse is removed
   $('.slidedown').mouseout(function(){  
     $('.slidedown').stop().animate({
   height:'0px'
   }, 600, function() {
    // Animation complete.
  });
});
});

这行得通，但是我需要帮助的只有两个柚木。 首先，将鼠标移出并且.slidedown div向上滑动并消失后，如果我再将鼠标移到.trigger div上，则什么也没有发生。 它应该使.slidedown再次向下移动。 每次继续工作都需要它。 我尝试删除.stop（），但仍然无法正常工作。

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

第二，是否有办法在mouseout和div向上滑动之间延迟大约1秒？ 谢谢你的帮助！

Answer 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插件，以更精细地控制mouseenter / mouseleave行为，包括定时。

Answer 2

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

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