jQuery鼠标/鼠标保存问题

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

如果首先隐藏.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>

​