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>