jquery - 在反弹之前将 div 移动指定距离

Question

我有一个 div 在反弹之前从上到下移动，我需要使移动的距离更大。我的实际代码是这样的：

HTML：

<div id=popup>
    <p>Please, choose what type of puzzle you'd like to play</p>
</div>

jQuery：

       $(document).ready(function(){    
           $('#popup').show('bounce', { times:3 }, 300);
            });

我试图添加距离参数，但它没有做我需要的。

       $(document).ready(function(){    
           $('#popup').show('bounce', { times:3 , distance: 200 }, 300);
        });//No effect what ever value i give to the `distance` argument.

你可以看到我正在关注的演示。我需要在它被反弹之前将它移动到页面的中心（从顶部到中心）。提前谢谢。

Answer 1

设置distance和direction选项应该有效：

$('#bounce').show("bounce", {
    times: 3,
        direction: "down",
        distance: $(window).height()/2
}, 300);

在此处查看演示。

Answer 2

你问的不是很清楚......我仍然认为这应该有所帮助：

Javascript

$('#popup').animate({
    top: (($(window).height()/2) - ($('#popup').outerHeight()/2)
)}, 2000, 'easeOutBounce');

缓动功能可以在这里找到