jQuery学习笔记1(7)—— 动画

1、show / hide

        直接以无参数形式调用show()hide(),会显示和隐藏DOM元素。但是,只要传递一个时间参数进去,就变成了动画。

        时间以毫秒为单位,但也可以是'slow''fast'这些字符串。

        toggle()方法则根据当前状态决定是show()还是hide()

2、slideUp / slideDown

        show()hide()是从左上角逐渐展开或收缩的,而slideUp()slideDown()则是在垂直方向逐渐展开或收缩的。

        slideToggle()则根据元素是否可见来决定下一步动作。

3、fadeIn / fadeOut

        fadeIn()fadeOut()的动画效果是淡入淡出,也就是通过不断设置DOM元素的opacity属性来实现。

        fadeToggle()则根据元素是否可见来决定下一步动作。

4、自定义动画

        animate(),它可以实现任意动画效果,我们需要传入的参数就是DOM元素最终的CSS状态和时间。

        animate()还可以再传入一个函数,当动画结束时,该函数将被调用。

        这个回调函数参数对于基本动画也是适用的。

5、串行动画

        jQuery的动画效果还可以串行执行,通过delay()方法还可以实现暂停。

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434500456006abd6381dc3bb439d932cb895b62d9eee000

发布了120 篇原创文章 · 获赞 30 · 访问量 35万+

猜你喜欢

转载自blog.csdn.net/yjh4866/article/details/84836867