jQuery animate issues (carries on animating)

I'm attempting to do a fairly simple set of jQuery a开发者_如何学Gonimations with the following code:

The things is its not working how I planned, when you hover over the menu, the div below should move down and the menu expand and when you hover out, the reverse should happen!

The site is http://www.twostepmedia.co.uk/intasound/services.php to save putting all the HTML

$('.tabs li a').animate({
    height: '40'
}, 1000, function () {
    // Animation complete.
});

$('#tabs-wrap').animate({
    marginTop: '-=147'
}, 1000, function () {
    // Animation complete.
});

$(".tabs").hover(function () {
    $('#tabs-wrap').animate({
        marginTop: '+=147'
    }, 500, function () {
        $('.tabs li a').animate({
            height: '150'
        }, 500, function () {
            // Animation complete.
        });
    });
}, function () {
    $('.tabs li a').animate({
        height: '40'
    }, 500, function () {
        $('#tabs-wrap').animate({
            marginTop: '-=147'
        }, 500, function () {
            // Animation complete.
        });
    });
});

it is important to note that the callback is executed once per matched element, not once for the animation as a whole. (http://api.jquery.com/animate/)

Since $('.tabs li a') returns 4 elements, the callback function will run 4 times, if interpret the documentation correctly.

perhaps you could try something like this?

$('.tabs').hover(
    function(){
        $('#tabs-wrap').animate({marginTop: '+=147'}, 500);
        $('.tabs li a').delay(500).animate({height: '150'}, 500);
    },
    function(){
        $('.tabs li a').animate({height: '40'}, 500);
        $('#tabs-wrap').delay(500).animate({marginTop: '-=147'}, 500);
    }
);