Expanding content areas using jQuery animate function

Question

I'm using the animate function in jQuery to re-size a content area when the user hovers over the element.

The script works fine but I cant work out how to stop the script from resizing more than once if the element is hovered over more than once.

I have created a jsfiddle here I have also added the js I used.

var minheight = $('.section-fade').css("height");
$('.section-fade').hover(

function () {
    $(this).animate({
        height: $('.childsection').height()
    }, 1000);
},

function () {
    $(this).animate({
        height: minheight
    }, 1000);
});

Any ideas would be very much welcomed.

Cheers

Answer 1

What you're looking for is .stop() .

.stop() will cancel all animations on an object.

http://jsfiddle.net/zxm9S/1/

var minheight = $('.section-fade').css("height");
$('.section-fade').hover(

function () {
    $(this).stop().animate({
        height: $('.childsection').height()
    }, 1000);
},

function () {
    $(this).stop().animate({
        height: minheight
    }, 1000);
});