jQuery mouseenter/mouseleave问题

Question

我有这样的感觉，我的问题是非常愚蠢的，但我无法修复它。我在一个容器中有两个div，其中一个默认隐藏。当鼠标移到父div上时，我想用slideDown显示隐藏的div，并隐藏另一个div。当我将鼠标从div上移到bottom时，它会很好地工作，但如果我从底部移动鼠标，它会上下滑动一段时间。在这里，我有一个小提琴：

[编辑]

我忘了说，我需要这与动态创建的div工作。

http://jsfiddle.net/7gva4fad/

jQuery(document).on({ 
 
    mouseenter: function() { 
 
     jQuery(this).find('.msg').hide(); 
 
     jQuery(this).find('.conv').slideDown(300);   
 
    } 
 
}, ".tooltip"); 
 

 
jQuery(document).on({ 
 
    mouseleave: function() { 
 
     jQuery(this).find('.conv').slideUp(300); 
 
     jQuery(this).find('.msg').show(); 
 
    } 
 
}, ".tooltip");

.tooltip{ 
 
    width: 250px; 
 
    height: 30px; 
 
    border: 1px solid #000; 
 
} 
 
.conv{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div class="tooltip"> 
 
    <div class="conv">Hello again</div> 
 
    <div class="msg">Hello world</div> 
 
</div>

任何想法完全理解。

Answer 1

如果先隐藏的.msg DIV的mouseleave事件被称为，因为在.tooltip DIV具有高度0

尝试是这样的：

jQuery(document).on({ 
    mouseenter: function() { 
     jQuery(this).find('.msg').stop(false, true).slideUp(300); 
     jQuery(this).find('.conv').stop(false, true).slideDown(300);   
    } 
}, ".tooltip"); 

jQuery(document).on({ 
    mouseleave: function() { 
     jQuery(this).find('.conv').stop(false, true).slideUp(300); 
     jQuery(this).find('.msg').stop(false, true).slideDown(300); 
    } 
}, ".tooltip"); 

http://jsfiddle.net/7gva4fad/2/

Answer 2

jQuery(function($) { 
 

 
    $('.tooltip').hover(function() { 
 
     $('.msg, .conv', this).stop().slideToggle(); 
 
    }); 
 
    
 
});

.tooltip{ 
 
    width: 250px; 
 
    border: 1px solid #000; 
 
} 
 
.conv{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tooltip"> 
 
    <div class="conv">Hello again</div> 
 
    <div class="msg">Hello world</div> 
 
</div>