jQuery DIV展開懸停，鼠標移動時的合同

Question

我有一組四個DIV，每個DIV都是一個段落的標題。我希望每個DIV都能在懸停時展開，以顯示一段短文，然後在鼠標懸停後重新收回。 jQuery運行正常。唯一的問題是，如果我快速地在四個DIV上來回追蹤光標，它似乎會破壞這個功能。

它所做的只是隨意展開和契約各種DIV，沒有任何可辨別的模式。

$('#iam_writer').hover(function(){ 
     $(this).animate({'height' : '120px'}, 'slow'); 
     $(this).on('mouseleave',function(){ 
      $(this).animate({'height' : '25px'}, 'fast'); 
     });          
    });  
    $('#iam_social').hover(function(){ 
     $(this).animate({'height' : '135px'}, 'slow'); 
     $(this).on('mouseleave',function(){ 
      $(this).animate({'height' : '25px'}, 'fast'); 
     }); 
    }); 
    $('#iam_creative').hover(function(){ 
     $(this).animate({'height' : '135px'}, 'slow'); 
     $(this).on('mouseleave',function(){ 
      $(this).animate({'height' : '25px'}, 'fast'); 
     }); 
    }); 
    $('#iam_strategic').hover(function(){ 
     $(this).animate({'height' : '140px'}, 'slow'); 
     $(this).on('mouseleave',function(){ 
      $(this).animate({'height' : '30px'}, 'fast'); 
     }); 
    }); 

也許有更好的方法來實現這個目標？

Answer 1

每當您將鼠標懸停時，您都會綁定mouseleave事件。 .hover也有兩個參數：對了mouseenter一個功能，一個用於鼠標離開，所以你可以寫這樣的：

$('#iam_writer').hover(function(){ 
    $(this).stop().animate({'height' : '120px'}, 'slow'); 
}, function() { 
    $(this).stop().animate({'height' : '25px'}, 'fast'); 
}); 

我還添加.stop這樣，如果另一個動畫被觸發任何當前動畫被暫停，這恰好當你快速移入和移出元素時。