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这样，如果另一个动画被触发任何当前动画被暂停，这恰好当你快速移入和移出元素时。