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'});

});​

这里是一个小提琴。