具有弹跳定位问题的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'});

});?

这是一个小提琴.