防止鼠标悬停跳动div

Question

我写这个cod可以使用户在鼠标悬停时显示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%'
      })
})

我该如何预防？