我爱编程

jQuery动画操作

2018-06-19  本文已影响0人  hsj_gg

一、元素的显示与隐藏

1、hide(元素隐藏)方法

    $ele.hide()或.hide("fast / slow")   (fast:200毫秒。slow:600毫秒。)

2、show(元素显示)方法

    用法同hide相同

    可设置参数,单位为毫秒。

3、toggle(元素隐藏与显示切换)方法

    如果元素是最初显示,它会被隐藏

    如果隐藏的,它会显示出来

二、元素的上卷下拉效果

1、slideDown()(元素的下拉动画)

    $ele.slideDown( [duration ] [, callback ] )

    duration设置动作需要的时间单位是毫秒。

    slidetoggle 函数执行完之后,要执行的函数。

2、slideUp()(元素的上卷动画)

    用法同slideDown

3、$ele.slideToggle( [duration ] ,[ callback ] )(元素的下拉与上卷动画)

        如果元素是最初显示,它会被上卷

        如果隐藏的,它会下拉

三、元素的淡入淡出效果

1、$ele.fadeIn( [duration ] ,[ callback ] )(淡入效果)

        使元素opacity(透明度)从0到1变

2、$ele.fadeOut( [duration ] ,[ callback ] )(淡出效果)

        使元素opacity(透明度)从1到0变

3、$ele.fadeToggle( [duration ] ,[ callback ] )(淡入淡出效果)

fadeToggle切换fadeOut与fadeIn效果,所谓"切换",即如果元素当前是可见的,则将其隐藏(淡出);如果元素当前是隐藏的,则使其显示(淡入)。

4、$ele.fadeTo( duration, opacity ,callback)方法

使元素动画固定到某个状态。

duration时间参数。动画需要的时间单位是毫秒。

opacity透明度。固定到那个透明度的位置。

callback回调函数。执行完fadeTo后执行的函数。

四、自定义动画

1、$ele.animate(styles,speed,easing,callback)方法

      参数:  styles:一个或多个css属性的键值对所构成的Object对象。要特别注意所有用于动画的属性必须是数字的。

                    speed:动作出现的时间,单位是毫秒。

                    animate 函数执行完之后,要执行的函数。

   $ele .animate( properties, options )

        properties;参数同上面style

        options可选。规定动画的额外选项。

2、stop()(停止动作)方法

    stop():只会停止第一个动画,第二个第三个继续

    stop(true):停止第一个、第二个和第三个动画

    stop(true ture):停止动画,直接跳到第一个动画的最终状态 

上一篇下一篇

猜你喜欢

热点阅读