zoukankan      html  css  js  c++  java
  • jQuery — 动画/效果

    一、基本效果

      1、show([s,[e],[fn]])

        用法:

    格式:$("p").show()                 显示所有的段落

    说明:显示隐藏的匹配元素,如果元素可见,不会改变任何东西,无论是通过hide()方法设置还是CSS中设置 display:none 该方法都有效。

      2、hide([s,[e],[fn]])

        用法:

    格式:$("p").hide()                   隐藏所有段落

    说明:隐藏显示的元素

      3、toggle([s,[e],[fn]])

        用法:

    格式: $("td").toggle()                对表格切换显示/隐藏

    说明:用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的时间,如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

      上面三个函数参数说明:

    speed:三种预定速度之一的字符串('slow','normal','fast')或表示动画时长的毫秒数值(如:1000 毫秒为单位)

    easing:用来指定切换效果:默认是 "swing",可用参数 "linear"

    fn:在动画完成时执行的函数,每个元素执行一次(回调函数)

    二、滑动效果

      1、slideDown([s],[e],[fn])

        用法:

    格式:$("p").slideDown()           以向下滑动方式显示隐藏 <p> 元素

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

      2、slideUp([s,[e],[fn]])

        用法:

    格式:$("p").slideUp()                 以向上滑动方式隐藏 <p> 元素

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

      3、slideToggle()

        用法:

    格式:$("p").slideToggle()              以滑动方式显示或隐藏 p 元素

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

      注意:这三个函数里面的参数请参照上面的参数说明。

    三、淡入淡出

      1、fadeIn([s],[e],[fn])

        用法:

    格式:$("p").fadeIn()                       将 p 元素淡入

    说明:通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数

      2、fadeOut([s],[e],[fn])

        用法:

    格式:$("p").fadeOut()                      将 p 元素淡出

    说明:通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数

      3、fadeTo([s],o,[e],[fn])

        用法:

    格式:$("p").fadeTo(''600",0.5)          用600毫秒缓慢的将段落的透明度调整到 0.5(半透明)

    说明:把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数
    opactity 参数说明:一个 0 至1 之间表示透明度的数字,0表示完全透明,1表示完全不透明,0.5表示半透明

      4、fadeToggle([s],[e],[fn])

        用法:

    格式:$("p").fadeToggle("slow","linear")           用600毫秒缓慢的将段落淡入

    说明:通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数

      注意:这三个函数里面的参数请参照上面的参数说明。

    四、自定义效果

      1、animate(p,[s],[e],[fn])

        用法:

    说明:用户创建自定义动画的函数

    params参数说明:一组包含作为动画属性和终值的样式属性和及其值的集合

        Demo:为指定元素添加动画效果(几个不同的属性一同变化)

    1 $("#block").animate({ 
    2      "90%",
    3     height: "100%", 
    4     fontSize: "10em", 
    5     borderWidth: 10
    6   }, 1000 );

      2、stop([c],[j])

        语法:

    格式: $("#box").stop()                停止当前正在运行的动画

    说明:停止所有在指定元素上正在运行的动画

    参数: clearQueue:如果设置为 true,则清空队列,可以立即结束动画。

        jumpQueue:如果设置为 吐热,则完成队列,可以立即完成动画。

      3、delay(d,[q])

        语法:

    格式:$("#foo").slideUp().delay(1000).fadeIn(400)       在.slideUp() 和 .fadeIn() 之间延时 800 毫秒

    说明:设置一个延时来推迟执行队列中之后的项目

    参数:duration:延时时间,单位:毫秒;  

       queueName:队列名次,默认是 Fx,动画队列

      4、finish([queue])

        用法:

    格式:$("#box").finish()                 停止当前正在运行的动画

    说明:停止当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画

    参数:queue:停止动画队列中的名称

    注意:.finish()方法和.stop(true, true)很相似,.stop(true, true)将清除队列,并且目前的动画跳转到其最终值。但是,不同的是,.finish() 会导致所有排队的动画的CSS属性跳转到他们的最终值。

    五、效果设置

      1、jQuery.fx.off

        用法:

    格式:jQuery.fx.off = true;                            立即关闭所有动画

    说明:关闭页面上所有的动画,设置该属性为 true,立即关闭所有动画;设置该属性为 false,重新开启所有动画

      2、jQuery.fx.interva

        用法:

    格式:jQuery.fx.interva = 1000

    说明:设置动画的显示帧速

  • 相关阅读:
    MYSQL中replace into的用法以及与inset into的区别
    怎么安装phpcms?PHPCMS V9安装图文教程
    Yii 框架生成缩略图
    怎么让普通用户使用root权限执行用户命令
    自学Linux命令的四种方法
    最完整PHP.INI中文版
    前端chrome浏览器调试
    phpstorm快捷键记录
    客户关系管理
    Subquery returns more than 1 row
  • 原文地址:https://www.cnblogs.com/niujifei/p/12398070.html
Copyright © 2011-2022 走看看