为什么隐藏的分隔符在鼠标悬停后会重新出现

Question

为什么下面的代码不能按预期运行？请帮忙！效果应该与此类似：http://techweek.com/miami/techweek100/

http://codepen.io/anon/pen/edpKc/

var img = $('.grid-gallery section');
  if (img.length){
      img.on('mouseover',function(){
          $(this).find('.minibio').slideDown('fast')
 });
$(img).on('mouseout',function(){
   $(this).find('.minibio').slideUp('fast');
   });
 }

它似乎反应过度，在我不想的时候切换。非常感谢！

Answer 1

您可能想要mouseenter和mouseleave：

img.on('mouseenter',function(){
    $(this).find('.minibio').slideDown('fast')
});
img.on('mouseleave',function(){
   $(this).find('.minibio').slideUp('fast');
});

您可以在"演示"下看到这些事件之间的差异。

Answer 2

如果你绑定了错误的事件，你会有更多的乐趣：

if (img.length){
  img.on('mouseenter',function(){
    $(this).find('.minibio').slideDown('fast')
  });
  $(img).on('mouseleave',function(){
    $(this).find('.minibio').slideUp('fast');
  });
}

参考：http://codepen.io/anon/pen/mwLtl/