您当前的位置: 首页 >  动画

梁同学与Android

暂无认证

  • 4浏览

    0关注

    618博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

jQuery-内置动画(实质)

梁同学与Android 发布时间:2020-03-10 10:49:26 ,浏览量:4

文章目录
    • 1.淡入与淡出
        • 淡入:fadeIn([speed],[easing],[fn])
        • 淡出:fadeOut([speed],[easing],[fn])
        • 切换显示隐藏fadeToggle([speed,[easing],[fn]])
    • 2.上下滑动
        • 向下滑:slideDown([speed],[easing],[fn])
        • 向上滑:slideUp([speed,[easing],[fn]])
        • 切换:slideToggle([speed],[easing],[fn])
    • 3.显示与隐藏
        • 显示:show([speed,[easing],[fn]])
        • 隐藏:hide([speed,[easing],[fn]])
        • 切换:toggle([speed],[easing],[fn])

1.淡入与淡出

原理是:不断改变元素的透明度(opacity)来实现的

淡入:fadeIn([speed],[easing],[fn])

(淡入为带动画的显示)元素style的变化过程如下:

display:block opacity:1到0变化 display:none

淡出:fadeOut([speed],[easing],[fn])

(淡出为带动画的隐藏)元素style的变化过程如下:

display:none opacity:0到1变化 display:block

切换显示隐藏fadeToggle([speed,[easing],[fn]])

(带动画的切换显示隐藏)

2.上下滑动

原理是:不断改变元素的高度来实现的

向下滑:slideDown([speed],[easing],[fn])

通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中,上下的padding和margin也会有动画,效果更流畅。

向上滑:slideUp([speed,[easing],[fn]])

通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏起来。在jQuery 1.3中,上下的padding和margin也会有动画,效果更流畅。

切换:slideToggle([speed],[easing],[fn])

如果当前状态是伸展点击切换就收缩,反之。

通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏或显示。在jQuery 1.3中,上下的padding和margin也会有动画,效果更流畅。

3.显示与隐藏 显示:show([speed,[easing],[fn]])

显示隐藏的匹配元素。

这个就是 ‘show( speed, [callback] )’ 无动画的版本。如果选择的元素是可见的,这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;,这个方法都将有效。

如果想要加动画,就给其动画加个时间,在变化过程中实际上改变的是高度、宽度、透明度

隐藏:hide([speed,[easing],[fn]])

隐藏显示的元素

这个就是 ‘hide( speed, [callback] )’ 的无动画版。如果选择的元素是隐藏的,这个方法将不会改变任何东西。

如果想要加动画,就给其动画加个时间,在变化过程中实际上改变的是高度、宽度、透明度

切换:toggle([speed],[easing],[fn])

用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。

如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

关注
打赏
1660730345
查看更多评论
立即登录/注册

微信扫码登录

0.2080s