CODEWITHSUNDEEP
jquerytogglemouseover
user2461031
user2461031

Reputation: 513

jquery, issue with toggle

When the mouse is over a div .frame I want to toggle a div .content inside of that div .frame And when the mouse is out .frame I want .content to toggle again and to remove.

It's working but I have several issues, first when the mouse is out .frame, .content is not toggeling but it just removing without any effects.

Then when the mouse is over .content (which is inside .frame), .content is removing...

my code is:

$(document).on('mouseover', '.frame', function() {
    var el = $(this);
    el.find('.inside').append('<div class="content"></div>');
    var content = $('.content:last');
    content.hide();
    content.html('aaaaaaaaaaaa<br>aaaaaaaaaaaa<br>aaaaaaaaaaaa<br>aaaaaaaaaaaa<br>');
    $('.content').toggle(300);
}).on('mouseout', function() {
    var content = $('.content:last');
    $('.content').stop().toggle(300).remove();
});

here a jsFiddle: http://jsfiddle.net/HAxPB/

Upvotes: 1

Views: 89

Answers (1)

Khanh TO
Khanh TO

Reputation: 48972

You have to use a callback function to wait until the effect has finished. And use mouseenter, mouseleave instead. There is also one small problem with the code at: .on('mouseout', function() {, it should be .on('mouseleave',",frame", function() {,

$(document).on('mouseenter', '.frame', function() {
    if ( $('.content').length > 0){
        return;
    }
    var el = $(this);
    el.find('.inside').append('<div class="content"></div>');
    var content = $('.content:last');
    content.hide();
    content.html('aaaaaaaaaaaa<br>aaaaaaaaaaaa<br>aaaaaaaaaaaa<br>aaaaaaaaaaaa<br>');
    $('.content').toggle(300);
}).on('mouseleave','.frame', function() {
    var content = $('.content:last');
    $('.content').stop().toggle(300,function(){
        $(this).remove();
    })
});

DEMO

Upvotes: 2

Related Questions