jQuery Animations or jQuery Easing?

Question

坚持我的观点。我试着模仿CSS3的过渡，(作为一个例子)我很喜欢logo的方式，并在http://metalabdesign.com

上做了一个"弹跳"效果。

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

我或多或少在寻找用jQuery处理easeIn类型转换的最佳方法。我的路线是，我必须为那些没有启用它的人指定一个非js版本(我知道，每个人都应该，只是说)，我希望它能在所有浏览器中工作(不仅仅是好的浏览器)，这就是为什么我要走jQuery路线。

但是，我看到的问题与我的jQuery方式是我如何有负的顶部定位计算和如何影响实际的"过渡效果"。如果有人知道我如何用jQuery easing(或更好的方法)创建类似的东西，我将非常感激。我在尝试实现jQuery easing时遇到了相当大的困难……所以现在真的陷入了困境。谢谢!

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运行并显示该元素。