2

坚持我这个。我正在尝试模仿 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 缓动时遇到了很大的困难……所以现在真的陷入了困境。谢谢!

4

1 回答 1

0

我将缓动插件添加到您的 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 运行并显示该元素。

于 2011-11-11T17:32:45.877 回答