jquery如何实现动画

本文环境：

• windows10、jquery2.2.4

• 本文适用于所有品牌的电脑。

实现原理：

所有 jQuery 动画从本质上来说，都是通过改变元素的 CSS 属性值来实现的。换句话说，jQuery 动画其实就是通过将元素的 CSS 属性从“一个值”在一定时间内平滑地过渡到“另一个值”，从而实现动画效果。

动画实现原理如下：

显示与隐藏：通过改变 display、opacity、width、height 来实现；

淡入与淡出：通过改变 display、opacity 来实现；

滑上与滑下：通过改变 display、height 来实现。

实际上，这 3 种动画形式就是使用 animate() 方法来实现的，只不过 jQuery 把它们封装得更加简单而已。

在下面 3 组代码中，每一组的两行代码其实都是等价的。

1、

$().hide(500);
$().animate({"width":"0", "height":"0", "opacity":"0.0", "display":"none"},500);

2、

$().fadeOut(500);
$().animate({"opacity":"0.0", "display":"none"},500);

3、

$().slideUp(500);
$().animate({"height":"0", "display":"none"},500);

在实际开发中，由于前 3 种动画形式都属于内置动画，它们的使用有很大的限制，因此我们更倾向于使用“自定义动画”的形式来实现各种动画效果。

以上就是jquery如何实现动画的详细内容，更多请关注其它相关文章！

lynch永久会员

打赏 收藏 海报 链接