本文环境:
-
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如何实现动画的详细内容,更多请关注其它相关文章!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。