zoukankan      html  css  js  c++  java
  • jQuery中的动画理论干货

    【jQuery中的动画】


    通过jQuery动画能够轻松地为页面添加精彩的视觉效果

    【show()方法和hide()方法】
    1、show()方法和hide()方法是jQUERY中最基本的动画方法,相当于在css中的display属性,hide()相当于css中的display:none;这两个方法用来控制内容的“显示”和“隐藏”。
    具体结构如下:
    $("element").hide();
    2、show()方法和hide()方法让元素动起来:这两个方法在不带参数的情况下,相当于css("display","none/block/inline");作用
    是立添加显示或隐藏,不会有动画效果,如果希望元素动画起来,可以show()传一个速度参数,速度关键字有
    (“slow”,“normal”,“fast”),也可以自定义速度值。hide()方法同样如此。

    【fadeIn()方法和fadeOut()方法】
    与show()方法不同的是,fadeIn()和fadeOut()方法只改变元素的不透明度。fadeOutah()方法在一定时间内降低元素的不透明度,直到元素消失,fadeIn()则相反。

    【slideUp()和slideDown()方法】
    这两个方法只改变元素的高度,如果一个元素的display属性为“none”,当调用slideDown()时,这个元素会由上至下延伸显示
    ,slideUp恰好相反。

    【自定义动画方法animate()】
    animate()方法自定义动画语法结构为:animate(param,speed,callback);
    参数说明:(1)params:一个包含样式属性及值得映射;
    (2)第二个为速度参数;
    (3)callback:在动画完成时执行的函数,可选。
    animate()方法自定义动画还可以实现累加,累减动画,例如:在移动动画上用“+=”或“-=”就可以实现当前位置上的累加或累减,{left:"+=500px"}。
    也可以实现"多重动画",既可以同时绑定多个事件处理函数。可以实现同时执行多个动画,也可以实现按顺序执行,这种方式称为
    “动画队列”。

    【动画中的回调函数】
    在某些例子中,如果想在动画的最后一步切换元素的css样式,而不是隐藏元素,直接在后面把fadeOut()方法变成css样式是没有
    效果的,动画执行时,css就开始执行,因为css并没有加入到“动画对列”中去。
    为了解决这个问题,我们可以使用回调函数对非动画方法实现排队,只要把css()方法写入最后一个动画的回调函数里即可。

    【停止动画和判断是否处于动画状态】
    1、停止元素的动画
    很多时候需要停止匹配元素的动画,使用stop()方法,结构为:stop([clearqueue],[gotoEnd]);
    两个参数都是可选的,都是布尔值,分别代表是否清空未执行完的动画对列,和是否直接将正在执行的动画跳转到末状态。
    2、判断元素是否处于动画状态
    在使用animate()方法的时候,要避免动画积累而导致的动画与用户的行为不一致,当用户快速点击在某个元素上执行animate动画时,就会出现动画积累,这时就需要判断一下元素是否处于动画状态,如果不处于就添加动画,

    代码如下:if(!$(element).is(":animate")){//判断元素是否处于动画状态
    //如果当前没有动画,就添加动画
    }
    3、延迟动画
    有时候需要在页面中对动画进行延迟,可以使用delay()方法,他可以推迟动画对列中的函数执行。

    【其他动画方法】
    jQuery中还有4个专门用于交互的动画方法。
    1、toggle()方法:该方法可以切换元素的可见状态,如果元素可见,则切换为隐藏。
    2、slideToggle()方法:该方法通过高度变化来切换匹配元素的可见性。当单击“标题”连接后,“内容”会在可见和隐藏两种状
    态中切换,不过是通过改变高度来实现的。
    3、fadeTo()方法:该方法可以吧元素的不透明度以渐进方式调整到指定的值。这个动画只调整元素的不透明度,即匹配的元素的
    高度不会变化。
    4、fadeToggle()方法:该方法通过不透明度变化来切换匹配元素的可见性,这个动画只调整元素的不透明度。

    特别注意:animate9)方法,可以用来代替其他所有的动画方法。

    都是干货,相关练习还得自己动手。

  • 相关阅读:
    POJ 1434 Fill the Cisterns! (模拟 or 二分)
    Educational Codeforces Round 16 D. Two Arithmetic Progressions (不互质中国剩余定理)
    Educational Codeforces Round 16 E. Generate a String (DP)
    UVALive 3958 Weird Numbers (负进制数)
    HDU 1429 胜利大逃亡(续) (bfs+状态压缩)
    svn 创建本地仓库
    android 动态库死机调试方法 .
    外部博客链接
    反汇编调试Android
    When a java class is load by classloader, where the constant poll be put?
  • 原文地址:https://www.cnblogs.com/yehui-mmd/p/5898028.html
Copyright © 2011-2022 走看看