jQuery动画操作

一、元素的显示与隐藏

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):停止动画,直接跳到第一个动画的最终状态 

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性。但是通过css...
    老夫撩发少年狂阅读 1,109评论 0 2
  • jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性。...
    阿r阿r阅读 1,169评论 0 4
  • 第1章 动画基础隐藏和显示 1-1 jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置c...
    mo默22阅读 784评论 0 8
  • (续jQuery基础(2)) 四、动画篇 第1章 动画基础隐藏和显示 (1)隐藏元素的hide方法 让页面上的元素...
    凛0_0阅读 466评论 0 6
  • 米叔的电影看过好几部,《印度往事》,《未知死亡》,《地球上的星星》,《三傻大闹宝莱坞》,《我的个神啊》,下午下班带...
    七月紫苏阅读 248评论 1 0