jQuery mouseenter/mouseleave issue

Question

我觉得我的问题很愚蠢，但我无法解决。我在一个容器中有两个div，其中一个默认隐藏。当鼠标放在父div上时，我想用slideDown显示隐藏的div，并隐藏另一个。当我将鼠标从div的上方移动到下方时，它可以很好地工作，但如果我从下方移动鼠标，它会上下滑动一段时间。给我一把小提琴：

[编辑]

我忘了说我需要这个来处理动态创建的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

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>

Answer 2

如果首先隐藏.msgdiv，则会调用mouseleave事件，因为.tooltipdiv的高度为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/