JQuery幻灯片效果与反弹定位问题

Question

我试图创建一个效果，在鼠标悬停，从父div的底部滑出一个div，并在幻灯片完成后反弹。

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

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

我的代码小提琴到目前为止是在这里：

http://jsfiddle.net/7TZ3E/

有时候似乎工作，那么它在许多不同的方式搅乱。要么停止显示，跳到父div的顶部，要么缓慢减小尺寸。

我很感激任何帮助，以产生我期待的效果！

Answer 1

可能，这将帮助你

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

});​ 

Here是小提琴。