Question

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

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

这很有效，但我需要帮助的只有两个柚木。首先，在mouseout和.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 plug-in，了解对mouseenter / mouseleave行为的更细致控制，包括时间安排。

Answer 2

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

正如Ken指出的那样，setTimeout对于代码延迟非常有用，但是将其保留在$('.slidedown').mouseout()事件中，或者在{mouse}输出slideown div后隐藏trigger div当您按照指定离开slidedown div时。

jquery .animate（） - 这段代码可以满足我的需求

2 个答案: