Jquery 用鼠标悬停防止弹跳div

我写这个代码是为了在用户鼠标滑过时显示一个div，鼠标滑出时消失，但在许多情况下div像循环一样反弹：

    $(document).on('mouseover', '.card-image', function() {
      var elId = $(this).data('rel');
      $('#'+elId).animate({
          opacity:'1',
          height:'50%'
      },{
    step: function(now,fx) {
      $(this).css('-webkit-transform','rotate(-2deg)'); 
    },duration:'slow'},'linear');
});

$(document).on('mouseout', '.card-image', function() {
      var elId = $(this).data('rel');
      $('#'+elId).animate({
          opacity:'0',
          height:'0%'
      })
})

---

如何防止？

您能创建一个代码段吗？旋转/收缩div可能导致多个鼠标溢出/移出事件。您可以添加一个

$（“#”+elId）.finish（）

或

.stop（true，false）

作为每个事件处理程序清除队列的第一行