• jq动画


    今天发表的内容是js动画,接下来呢 ,我给大家来阐述一下(4点):

      1.显示隐藏动画效果

      2.淡入淡出动画效果

      3.滑入滑出动画效果

      4.自定义动画

         显示与隐藏动画效果

        show()方法与hide()方法--toggle()方法

          show()方法会动态的改变当前元素的高度、宽度和不透明度,最终显示当前元素,此时元素的css属性display恢复为除了none之外的初始值。

          show()方法的语法结构为:

                 jQuery队象.show(duration,[fn]);

                 参数duration表示动画效果运行时间,可以使用的关键字slow、normal和fast,分别对应时间的长度0.6秒、0.4秒和0.2秒,

                 参数要加引号;也可以是用数值,单位默认为毫秒,此时参数不需要加引号。

          

          hide()方法会动态改变当前元素的高度、宽度和不透明,最终隐藏当前元素,此时元素的css属性display修改为none.

                  其语法结构为:jQuery对象.hide(duration,[fn]);

          toggle()方法除了可以模拟鼠标的连续单击事件之外,同时还会动态地改变当前元素的高度、宽度和不透明度,最终切换当前元素的可见状态。

              即如果元素是可见的,则被切换为隐藏状态;如果元素是隐藏的,则被切换为可见状态。

                  其语法结构为:jQuery对象.toggle(duration,[fn]);

       淡入淡出的动画效果

          fadeIn()方法与fadeOut()方法 fadeIn()方法动态地改变当前元素的透明度(其他不变),实现淡入的动画效果,最终显示当前元素,

          此时元素的css属性display恢复除了none之外的初始值。

                  fadeIn()方法的格式如下:jQuery对象.fadeIn(duration,[fn]);

          

          fadeOut()方法动态地改变当前元素的透明度(其他不变),实现淡出的动画效果,最终隐藏当前元素,

          此时元素的css属性display修改为none。

                  fadeOut()方法的格式如下:jQuery对象.fadeOut(duration,[fn]);

          fadeToggle()会动态地改变当前元素的透明度,最终切换当前元素的可见状态。

          即如果元素是可见的,则通过淡出效果切换为隐藏状态;如果元素是隐藏的,则通过淡入效果切换为可见状态。

                  其语法结构为:jQuery对象.fadeToggle(duration,[fn]);

          在jQuery中,fadeIn()和fadeOut()方法通过改变元素的透明度来实现元素的显示和隐藏,其透明度从0.0到1.0淡入或从1.0到0.0淡出,从而实现淡入淡出的动画效果;如果要将透明度指定到某一个值,则需要调用fadeTo()方法。

                  fadeTo()的语法格式为:jQuery对象.fadeTo(duration,opacity,[fn]);

                                            参数duration为动画效果的速度,使用方式与hide()、show()方法等一致;参数opacity用于指定不透明值,取值范围是0~1,0代表完全透明,1代表完全不透明。

        滑入与滑出动画效果

           slideDown()方法与slideUp()方法

           slideDown()方法会动态地改变当前元素的高度(其他不变),由上到下滑入,即高度向下增大,使其呈现出一种“滑动”的效果,直至最终显示当前元素,此时元素的css属性display恢复为除了none之外的初始值。

                  slideDown()方法的语法格式如下:jQuery对象.slideDown(duration,[fn]);

            

          slideUp()方法会动态地改变当前元素的高度,由下到上滑出,即高度向上减小,直至最终隐藏当前元素,此时元素的css属性display修改为none。slideUp()方法的语法格式请参考slideDown()方法。

          slideToggle()方法会动态地改变当前元素的高度,最终切换当前元素的可见状态。即如果元素是可见的,则通过滑出效果切换为隐藏状态;如果元素是隐藏的,则通过滑入效果切换为可见状态。
                  其语法结构为:JQuery对象.slideToggle(duration,[fn]); 其参数参考show()方法。

       自定义动画

            animate()方法可以动态地改变当前元素的各种css属性。

                  其语法结构为:jQuery对象.animate(properties,[duration],[fn]);

                  其中,参数properties使用一个“名:值”形式的对象,用来设置需要改变的css属性。animate()方法只能改变可以取数字值的css属性,如大小属性(width、height)、边框属性(border-width)、外边距属性(margin)、内边距属性(padding)、定位属性(top、left、bottom、right)、字体属性(font-size)、文本属性(text-indent、letter-spacing、word-spacing)、背景属性(background-position)和透明度(opacity)。

                  可以缺省的参数duration和fn请参考show()方法的说明。

      自定义中需要注意的问题:

            如果要实现页面中的元素以动画效果移动,必须首先将元素的“position”属性设置为“relative”或“absolute”,否则,无法移动该元素的位置。

      

      以上是我所发表的内容,希望对各位有所帮助!

  • 相关阅读:
    CORS(跨域)请求总结和测试
    使用parted 创建一个大于2T的分区
    Linux下网络设置
    Linux中文件查找,压缩和打包指令
    使用switchshow/supportshow命令确认Brocade交换机型号(转载)
    光纤交换机端口故障排查
    博科5300光纤交换机内存故障处理
    AIX用户和组管理
    AIX 逻辑卷简介
    AIX中文件系统管理
  • 原文地址:https://www.cnblogs.com/zy17600095897/p/7087204.html
Copyright © 2020-2023  润新知