zoukankan      html  css  js  c++  java
  • jQuery动画

    jQuery任何动画都能指定3种速度参数"slow","normal","fast"(时间分别是0.6s  0.4s  0.2s),使用该3参数时必须加引号。另外还可以使用数字作为时间参数,例如show(1000)。

    1、show()和hide()方法

      show()方法 最后将元素的display属性设置为block。

      hide()方法 最后将元素的display属性设置为none。

      如果不给参数,就是直接将元素隐藏或显示,不会有任何动画。

      如果给这2个方法设置参数  会出现一个宽度、高度和透明度分别同时改变的动画效果。

    2、fadeIn()和fadeOut()方法 只改变透明度的动画效果

      fadeIn()方法  元素的opacity从0到1直到显示的动画过程。

      fadeOut()方法 元素的opacity从1到0直到完全消失的动画过程。

    3、slideUp()和slideDown()方法 通过改变高度实现动画效果

      slideDown() 从上到下过渡显示

      slideUp() 从下到上过渡隐藏

    4、animate() 自定义动画

      animate(params, speed, callback);  可以用animate()方法来操作几乎所有的css属性。但是属性名要使用驼峰写法比如fontSize而不是连字符"-",另外色彩动画不包含在jquery核心库中

      params一个包含样式属性和值的映射 {"property1":"value1", "property2:"value2", "propertyN":"valueN"}。

      speed 效果的时长。

      callback 动画完成之后的回调函数。

      当一个元素上应用多个属性时,动画是同时进行的 ;当同时编写多个animate()调用,jQuery会创建包含这些调用的队列,然后逐一运行这些调用。

      使用animate()方法过程中可能由于操作过快,导致动画衔接脱节,一般会加一个stop()方法比如$("element").stop().animate();

      如果想对动画进行延迟操作,提供了一个delay()方法  $("element").delay(1000).animate();

    5、stop()停止动画

      stop([clearQueue] [gotoEnd]) 两个参数都是可选的,都为Boolean值(true 或 false)。

      clearQueue: 清除当前队列动画。

      gotoEnd: 将正在执行的动画跳转到末尾状态。

    6、如果判断页面上元素是否处于动画状态呢 if($("element").is(":animated")) { };

    注: callback回调函数适用于jQuery所有动画方法。

  • 相关阅读:
    Math 方法的使用
    敏捷开发 故事墙
    利用OpenPOP开源组件实现接收电子邮件功能
    JDBC连接MySql数据库
    【转】"已成功与服务器建立连接,但是在登录前的握手期间发生错误"问题解决方案
    【转】如何让虚拟目录里面的webconfig不继承网站
    【转】JavaScript控制图片放大缩小
    【Wonder原创】CheckBoxList实现单选
    【杂记】ASP.Net Web开发
    【Wonder整理】防止重复提交并弹出半透明对话框
  • 原文地址:https://www.cnblogs.com/wanbi/p/4200752.html
Copyright © 2011-2022 走看看