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

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

jQuery mouseenter / mouseleave问题

2 个答案: