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

    jquery中常用的动画的方法就是hide()与show().

    $(element).hide()这段代码可以与这相等element.css("display","none")

     在hide(time)与show(time)中填入事件,可以慢慢消失跟显现。可以修改元素的多个样式,高度,宽度,不透明度。

    另一组方法fadeIn()与fadeOut()这个与hide跟show不同的是,当使用hide或者show的时候会改变网页的高度,而fadeIn与fadeOut则不会。

     
                    $("#panel h5.head").toggle(function(){                     $(this).addClass("highlight");                     $(this).next().fadeOut(1000);                 },function(){                     $(this).removeClass("highlight");                     $(this).next("div .content").fadeIn(1000);                 });
     

    还有一组是slideUp,slideDown改变高度。

    动画方法概括

    方法名

    说明

    Hide()跟show()

    同时修改多个样式属性:高度、宽度、不透明度

    fadeIn(),fadeout()

    只修改不透明度

    slideUp()和slideDown()

    只改变高度

    fadeTo()

    只改变不透明度

    Toggle()

    用来替代hide()方法和show()方法,所以会同时修改多个样式属性即高度宽度和不透明度

    slideToggle()

    用来代替slideUp()和slideDown()方法,所以只能改变高度

    Animate()

    属于自定义动画的方法,以上各种动画方法实质上都掉了了animate()方法,直接使用animate()方法还能自定义其他的属性样式,例如left,marginLeft,scrollTop等

    动画队列

    (1)       一组元素上的动画效果。

    a)         当在一个animate()方法中应用多个属性时,动画是同时发生的。

    b)         当以链式的写法应用动画方法时,动画是按照顺序发生的。

    (2)多组元素上的动画效果

             a)默认情况下,动画都是同时发生的。

             b)当以回调的形式应用动画方式时,动画是按照回调顺序发生的。

    另外,在动画方法中,要注意其他非动画的方法会插队,例如css()方法,要使这些非动画的方法也按照顺序来执行,需要把这些方法写在动画方法的回调函数中。

    举一个animate的例子:

    $(“#id”).animat({left:”400px”,top:”300px”},3000,function(){

             $(this).css(“border”,”1px solid blue”);

    });

    若想要动画停止,需要在animate()方法前插入stop()方法

    例如:$(“#id”).stop().animate()注意stop中的两个参数。

    判断元素是否在动画状态的方法时:

    $(element).is(“:animated”);

  • 相关阅读:
    day14
    day13
    装饰器小题
    day12
    tes..
    1380 没有上司的舞会
    算法模板——KMP字符串匹配
    算法模板——Tarjan强连通分量
    3211: 花神游历各国
    1131: [POI2008]Sta
  • 原文地址:https://www.cnblogs.com/sntetwt/p/3311971.html
Copyright © 2011-2022 走看看