jQuery动画或jQuery Easing？

Question

坚持这一点。我试图模仿CSS3过渡和（作为一个例子）我非常喜欢这个标志是如何进入并在http://metalabdesign.com

上做出“反弹”效果的

我已经创建了一个快速的jsFiddle，我认为这可能与jQuery动画http://jsfiddle.net/EEtVs/有关，但老实说我不确定我是否应该使用jQuery Easing http://gsgd.co.uk/sandbox/jquery/easing/这将是更好的路径。< / p>

我或多或少都在寻找使用jQuery处理easeIn类型转换的最佳方法。我进入小提琴的路线是，我必须为那些没有启用它的人指定一个非JS版本（我知道，每个人都应该，只是说）并且我希望它适用于所有浏览器（不仅仅是好的）这就是为什么我要走jQuery路线。

但是，我用jQuery方式看到的问题是我如何计算负顶部定位以及它如何影响实际的“过渡效果”。如果有人知道如何用jQuery缓动（或更好的方式）创建类似的东西，我会非常感激。我在尝试实现jQuery缓存方面遇到了很多困难......所以此刻真的陷入困境。谢谢！

Answer 1

我将缓动插件添加到您的jsfiddle，然后为您的.animate()电话添加了一个新的缓动类型：http://jsfiddle.net/jasper/EEtVs/1/

我还更改了您动画元素的top值，因为它只需要足够大，以便在页面加载时隐藏元素。

您可以通过将“easeOutBounce”更改为此页面上的任何宽松类型来更改宽松类型：http://gsgd.co.uk/sandbox/jquery/easing/

如果您想确保您的元素显示在关闭JavaScript的浏览器中，请在页面的头部运行一个脚本，为HTML元素添加一个类，如下所示：

$('html').addClass('js');

现在，您可以为要弹出的元素制作两个版本的CSS：

#heroElement {
    position:relative;
    top:0px;
}
.js #heroElement {
    position:relative;
    top:-60px;
}

这将把元素的顶部设置到页面顶部，除非启用了JavaScript，在这种情况下，元素将被隐藏，直到JavaScript运行并显示元素。