CODEWITHSUNDEEP
jquerycss
Cassandra
Cassandra

Reputation: 187

jQuery mouseenter/mouseleave issue

I have the feeling that my problem is something very stupid, but I couldn't fix it. I have two divs in one container, and one of them is hidden by default. When the mouse is over the parent div I want to show the hidden div with a slideDown and hide the other one. It works perfectly when I move the mouse from upside the div to bottom, but if I move the mouse from the bottom it slides up and down for a while. Here I have a fiddle:

[EDIT]

I forgot to say that I need this to work with dynamically created divs.

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>
Any idea is fully appreciated.

Upvotes: 0

Views: 429

Answers (2)

algorhythm
algorhythm

Reputation: 8728

If you first hide the the .msg DIV the mouseleave event is called, because, the .tooltip DIV has height 0.

Try something like this:

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/

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206102

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>

Upvotes: 1

Related Questions