鼠標懸停後，爲什麼隱藏的分隔線會恢復原狀？

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

您prabably想mouseenter和mouseleave代替：

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

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

你可以看到在 「演示」 事件here之間的差異。

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/