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 。