CODEWITHSUNDEEP
javascriptjquery
Erik
Erik

Reputation: 11

jQuery DIV expands on hover, contracts on mouseout

I have a set of four DIV's, each a title to a paragraph. I want each DIV to expand on hover to reveal a short paragraph and then contract back on mouseout. The jQuery is functioning properly. The only problem is that if I trace the cursor back and forth over the four DIV's a few times quickly it seems to break the function.

What it does is just randomly expand and contract various DIV's without any discernible pattern.

    $('#iam_writer').hover(function(){
        $(this).animate({'height' : '120px'}, 'slow');
        $(this).on('mouseleave',function(){
            $(this).animate({'height' : '25px'}, 'fast');
        });                                     
    });     
    $('#iam_social').hover(function(){
        $(this).animate({'height' : '135px'}, 'slow');
        $(this).on('mouseleave',function(){
            $(this).animate({'height' : '25px'}, 'fast');
        });
    });
    $('#iam_creative').hover(function(){
        $(this).animate({'height' : '135px'}, 'slow');
        $(this).on('mouseleave',function(){
            $(this).animate({'height' : '25px'}, 'fast');
        });
    });
    $('#iam_strategic').hover(function(){
        $(this).animate({'height' : '140px'}, 'slow');
        $(this).on('mouseleave',function(){
            $(this).animate({'height' : '30px'}, 'fast');
        });
     });

Perhaps there is a better way to achieve this?

Upvotes: 1

Views: 362

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191809

You are binding the mouseleave event every time you hover over. .hover also takes two arguments: one function for mouseenter and one for mouseleave, so you can write it like this:

$('#iam_writer').hover(function(){
    $(this).stop().animate({'height' : '120px'}, 'slow');
}, function () { 
    $(this).stop().animate({'height' : '25px'}, 'fast');
});

I have also added .stop so that any current animation is halted if another animation is triggered, which happens when you quickly move in and out of the element.

Upvotes: 1

Related Questions