JQuery slide effect with bounce positioning issue

Question

I'm trying to create an effect which, on mouse over, slides out a div from the bottom of a parent div, and bounces once the slide is complete.

$("#testDiv").hover(function() {
    $(".box").stop().slideDown("slow", function() {
        $(".box").effect("bounce", {
            times: 3, distance: 3
        }, 250);
     });

    }, function() {
        $(".box").stop().slideUp();
});

A fiddle of my code so far is here:

http://jsfiddle.net/7TZ3E/

It sometimes seems to work, then it messes up in a number of different ways. Either it stops showing, jumps to the top of the parent div, or slowly decreases in size.

I'd appreciated any help to produce the effect I'm looking for!

Answer 1

May be this will help you

$("#testDiv").hover(function(e) {
    $(".box").stop(true,true).animate({height: ['toggle',  'easeOutBounce']}, 'medium');
},
function(e) {
    $(".box").stop(true,true).animate({height: 'toggle'});

});​

Here is a fiddle.