zoukankan      html  css  js  c++  java
  • JQuery中的动画

    一、show()方法和hide()方法

      这两种方法是jQuery动画的最基本方法。当为元素调用show方法时相当于将该元素的display样式改为block或者inline,同理,如果当元素调用hide方法时,相当于将该元素的样式改为none;因此:$("element").hide()等同于$("element").css("display","none");

    ps:hide()方法在将内容的display属性设置为none之前,会记住原先的display属性(除了none之外的值),当调用show()方法是,会根据hide()方法记住的display属性来显示元素。

      show()方法和hide()方法在没有带任何参数的情况下,作用是立即显示或者隐藏匹配的元素,不会有任何动画。如果希望元素能动起来,我们可以为其指定一个速度参数,如$("element").hide("fast")这里的fast是一个速度关键字,记住使用关键字时都要给它加上引号,一共有3个速度关键字:fast==200毫秒,normal==400毫秒,slow==600毫秒。不仅如此我们还可以显示的指定一个具体的数值,单位是毫秒。如$("element").hide(1000);

      show()和hide()方法在执行过程中会同时增加/减少内容的高度,宽度和不透明度,直到它们完全显示或消失。

    二、fadeIn()方法和fadeOut()方法

       与show()方法不同的是,fadeIn()方法和fadeOut()方法只改变元素的不透明度

       fadeOut()方法指在指定的一段时间内降低元素的不透明度,直到元素完全消失。fadeIn()则刚好相反。(经常搞混这两个那个是显示哪个是隐藏,这么记:我们叫人出去一般都吼out,然后他就消失了,当你对一个人说come in,他就出现在你面前了)

    三、slideUp()方法和slideDown()方法

        slideUp()方法和sildeDown()方法指在一段时间内改变元素的高度。slideUp()方法呢是指匹配的元素从下往上慢慢消失。slideDown()呢是指匹配的元素从上往下慢慢显示;这个还比较好记。

    四、自定义动画方法animate()

        在很多情况下,上面的三种方法无法满足用户的各种需求,那么久需要对元素有更多的控制,在jQuery中可以使用animate()方法来自定义动画;其语法结构:

    animate(params,speed,callback);
    //params:一个包含样式属性及值的映射,比如{property1:"value1",property2:"value2",....}
    //speed:速度参数,可选。 
    //callback:在动画完成时执行的函数,可选
     

     这里来详细了解哈callback的用法。如以下代码:

     

    其实这段代码的本意是:在点击a元素后,让该元素在3秒内先向距左200px,同时高度改为300px,不透明度变为1,然后完成上面的动作后该元素在又一个3秒内距上200px,高度变为300px,最后在为该元素设置border。但是上面的代码并不能够达到预期的值,实际上在刚开始执行动画的时候,css()方法就执行了,原因是css()方法并不会出现在动画队列中,而是立即执行,那么怎么改动代码才能实现预期的效果呢?这是就可以使用回调函数了。如下:

    $(function(){
       $("#a").click(function(){
           $(this).animate({left:"200px",height:"300px",opacity:"1"},3000)
                     .animate({top:"200px","300px"},3000,function(){
                           $(this).css("border":"5px solid blue");
    })   
      }}
    })
     

    它的作用就是在前面的动画执行完成后,才开始做function内的事情。

    PS:callback回调函数适用于jQuery所有的动画效果方法。

    五、停止动画和判断是否处于动画状态

       很多时候都需要停止匹配元素正在进行的动画,如果需要某处停止动画,需要使用stop()方法,其语法结构:stop([clearQueue],[gotoEnd]);其中clearQueue和gotoEnd()都是可选参数,它们均为Boolean值,其中clearQueue代表是否要清空未执行的动画队列,gotoEnd代表是否将正在执行的动画跳转到末状态。当然如果直接使用stop()方法,则会立即停止当前正在进行的动画,如果接下来还有动画等待继续,则以当前状态开始接下来的动画。 

    六、判断元素是否处于动画状态

        在使用animate()方法的时候,要避免动画积累而导致的动画与用户的行为不一致,当用户快速在某个元素上执行animate()动画时,就会出现动画积累。解决的方法是判断元素是否处于动画状态,如果元素不处于动画状态,才为元素添加新的动画,否则不添加。代码如下:

    if(!$(element).is(":animate")){
          //如果当前元素没有进行动画,则添加新动画
    }
    //这个判断方法经常在animate()动画中被使用,所以需要特别注意

    七、延迟动画

        在动画执行过程中如果想对动画进行延迟操作,那么可以调用delay()方法。使用方法如下:

    复制代码
    $(this).animate({left:"400px",height:"200px"},3000).delay(1000)
    复制代码

     delay()方法允许我们将队列中的函数延时执行,它既可以推迟动画队列中函数的执行,也可以自定义队列。


    八、其他动画方法

         除了上面的提到的方法以外,jQuery中还有4个专门用于交互的动画方法。toggle(speed,[callback]),slideToggle(speed,[easing],[callback]),fadeTo(speed,opacity,[callback]),fadeToggle(speed,[easing],[callback]).

         (1)toggle()方法:它可以切换元素的可见状态,如果元素可见,则切换为隐藏,如果元素隐藏,则切换为显示。实际上:

    $("#a").click(function(){
          $(this).next().toggle();
    })
    
    //等价于
     
    $("#a").toggle(function(){
          $(this).next().show();
    },function(){
          $(this).next().hide();
    })
    //这种写法在1.9版本的jQuery库里会出现问题

     总结:

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

        当在一个animate()方法中应用多个属性时,动画时同时发生的。当以链式的写法应用动画方法时,动画是按照顺序发生的(除非queue的选项值为false)

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

        默认情况下,动画都是同时发生的。当以回调的形式应用动画时(包括动画的回调函数和queue()方法的回调函数),动画是按照回调顺序发生的。

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

  • 相关阅读:
    用学习逃避成长,听新知缓解焦虑
    谈谈“人”和“技能”
    SpringMVC的工作原理
    Spring MVC 处理静态资源文件
    nrpe的安装设置
    Maatkit工具使用<一>之mysql主从数据校验工具
    phpcgi占用cpu100%的一次排障之旅
    nginx支持cgi
    如何查看服务器RAID卡信息的SHELL脚本和命令介绍
    Mysql的一次经典故障
  • 原文地址:https://www.cnblogs.com/xiaoXuZhi/p/3254272.html
Copyright © 2011-2022 走看看