jQuery 幻灯片效果存在弹跳定位问题

Question

我正在尝试创建一种效果，当鼠标悬停时，会从父 div 的底部滑出一个 div，并在滑动完成后弹起。

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

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

到目前为止我的代码的 fiddle 在这里:

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是一把 fiddle 。