jQuery mouseenter/mouseleave issue

Question

У меня такое ощущение, что моя проблема - это что-то очень глупое, но я не мог это исправить. У меня есть два divs в одном контейнере, и один из них скрыт по умолчанию. Когда мышь находится над родительским div, я хочу показать скрытый div с slideDown и скрыть другой. Он отлично работает, когда я перемещаю мышь от верхней части до нижней части, но если я перемещаю мышь снизу, она скользит вверх и вниз на некоторое время. Здесь у меня есть скрипка:

[EDIT]

Я забыл сказать, что мне это нужно, чтобы работать с динамически создаваемой дивой.

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>