滑動動畫，並不完美

Question

http://jsfiddle.net/UhNHW/

我試圖讓一個顏色塊滑到現有的小塊內的內容後面。它很糟糕，我需要讓它在同一頁面上爲多個實例工作。

任何幫助表示讚賞。

Answer 1

用鼠標這樣離開

$('.container') 
     .mouseover(function(){ 
      $('.box2').stop(true, true).animate({top:0}, 150); 
     }) 
     .mouseleave(function(){ 
      $('.box2').stop(true, true).animate({top:40}, 150); 
     }) 
     ; 

的多個實例嘗試這個

$('.container').each(function() { 
     var c = $(this); 
     var box = c.find('.box2'); 

     c.   
      mouseover(function(){ 
      box.stop(true, true).animate({top:0}, 150); 
      }) 
      .mouseleave(function(){ 
      box.stop(true, true).animate({top:40}, 150); 
      }); 
    }); 

Answer 2

使用mouseenter和mouseleave而不是mouseover和mouseout。

mouseout在遊標進入父div的另一個子元素時觸發。

Answer 3

這是你想要的嗎？

http://jsfiddle.net/UhNHW/20/

我基本上添加一個檢查.box2是否正在動畫，如果是這樣，只是沒有返回任何東西。

$(function() { 
    $('.container').on('mouseenter', function() { 
     var box = $(this).find('.box2'); 
     if(box.is(':animated')) return false; 
     box.stop(true, true).animate({ 
      top: 0 
     }, 150); 
    }); 
    $('.container').on('mouseleave', function() { 
     var box = $(this).find('.box2'); 
     if(box.is(':animated')) return false; 
     box.stop(true, true).animate({ 
      top: 40 
     }, 150); 
    }); 
});​