jQuery 动画还是 jQuery 缓动？

Question

请跟我一起讨论这个问题。我正在尝试模仿 CSS3 过渡，并且(作为示例)我非常喜欢 Logo 的出现方式并对 http://metalabdesign.com 产生“反弹”效果。

我创建了一个快速的 jsFiddle 来说明我认为它如何与 jQuery 动画配合使用 http://jsfiddle.net/EEtVs/但老实说我不确定我是否应该使用 jQuery Easing http://gsgd.co.uk/sandbox/jquery/easing/这里会是更好的路线。

我或多或少正在寻找使用 jQuery 处理 easeIn 类型转换的最佳方法。我在 fiddle 中的路线是，我必须为那些没有启用它的人指定一个非 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');

现在您可以为要跳入 View 的元素制作两个版本的 CSS:

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

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