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所有动画方法。

  • 相关阅读:
    [LeetCode]2. Add Two Numbers链表相加
    Integration between Dynamics 365 and Dynamics 365 Finance and Operation
    向视图列添加自定义图标和提示信息 -- PowerApps / Dynamics365
    Update the Power Apps portals solution
    Migrate portal configuration
    Use variable to setup related components visible
    Loyalty management on Retail of Dynamic 365
    Modern Fluent UI controls in Power Apps
    Change screen size and orientation of a canvas app in Power App
    Communication Plan for Power Platform
  • 原文地址:https://www.cnblogs.com/wanbi/p/4200752.html
Copyright © 2011-2022 走看看