jQuery 动画还是 jQuery 缓动？

Question

跟我一起来解决这个问题。我正在尝试模仿 CSS3 过渡，并且（作为示例）我非常喜欢徽标的出现方式，并对 http 产生“反弹”效果://metalabdesign.com

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

我或多或少正在寻找使用 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 运行并显示该元素。