具有弹跳定位问题的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是一个小提琴。