平滑下滑动画

13 浏览
0 Comments

平滑下滑动画

我写了一个小函数，但是它的动画效果不够流畅... 我在页面加载时对一个1600x700像素的div使用了它

$(document).ready(function(){
    $('#slider').slideDown(500);
});

有没有办法让它在页面加载时无论div大小是多大还是多小都能流畅运行？

FIDDLE DEMO

谢谢！

0

1 答案

0 Comments

问题的原因是滑动下拉动画的效果不够流畅。解决方法是使用jQuery Easing插件来实现平滑的滑动效果。

jQuery Easing插件是一个用于实现动画效果的插件，可以使动画更加平滑。可以通过以下步骤来使用该插件：

1. 下载jQuery Easing插件，下载链接为：http://gsgd.co.uk/sandbox/jquery/easing/

2. 在页面中引入jQuery和jQuery Easing插件的库文件。

3. 在代码中使用slideDown方法来实现滑动下拉效果，并使用"easeOutQuart"参数来指定使用jQuery Easing插件的平滑效果。

4. 通过$(document).ready()方法来确保页面加载完毕后再执行代码。

下面是使用jQuery Easing插件实现平滑滑动效果的代码示例：

$(document).ready(function(){
    $('#slider').slideDown(500, "easeOutQuart");
});

另外，你还可以参考更新后的示例代码：http://jsfiddle.net/T8vkA/1/

0