jQuery动画详解

jQuery是一个Javascript的函数库。它包含有很多的特性，可以对HTML的文档的遍历和操作以及事件处理、动画、Ajax等各项处理变得更加简单。本片文章将要对jQuery的动画作一详细的介绍。

 

一、首先先介绍一下jQuery内置的几种动画（各需核心代码均已列出）：

          基础HTML布局及CSS相关属性（作为视觉上的展示，主要能说明即可）。

1、隐藏、显示 、隐藏/显示，通过用jQuery中的方法hide()、show()、toggle()来分别操作。如下所示

      hide() 和 show() 分别可以携带两个可选参数，一个是speed参数另外一个是callback参数。

 jQuery("#btn1").click(function(){
      jQuery("#box").hide(1000,"linear",function(){
          alert("已执行隐藏");
      });
  });
  jQuery("#btn2").click(function(){
      jQuery("#box").show(1000,"linear",function(){
          alert("已执行显示");
      })
 });
 jQuery("#btn3").click(function(){
     jQuery("#box").toggle(1000,"linear",function(){
        alert("已执行隐藏或显示");
     })
 });

　　

2、淡入、淡出、淡入/淡出、透明度的参数，通过用jQuery中的方法fadeIn()、fadeOut()、fadeToggle()、fadeTo()来分别操作。

       fadeIn() 和 fadeOut() 分别可以携带两个可选参数，一个是speed参数另外一个是callback参数，

      其中 fadeTo有三个参数(speed,opacity,callback)其中opacity允许渐变为给定的不透明度（值介于 0 与 1 之间）。代码如下：

  jQuery("#btn4").click(function(){
      jQuery("#box").fadeIn(1000,function(){
          console.log("已执行淡入");
      });
  
  });
  jQuery("#btn5").click(function(){
      jQuery("#box").fadeOut(1000,function(){
          console.log("已执行淡出");
     });
 
 });
 jQuery("#btn6").click(function(){
     jQuery("#box").fadeToggle(1000,function(){
         console.log("已执行淡入/淡出");
     });
 
 });
 jQuery("#btn7").click(function(){
     jQuery("#box").fadeTo(1000,0.5,function(){
         console.log("改变透明度");
     });
 
 });

　　

3、向下滑动元素、向上滑动元素、向下/向上滑动元素,通过用jQuery中的方法slideDown()、slideUp()、slideToggle()来分别操作。

    slideDown() 和 slideUp() 分别可以携带两个可选参数，一个是speed参数另外一个是callback参数。代码如下：

  jQuery("#btn8").click(function(){
      jQuery("#box").slideDown(1000,function(){
          console.log("已执行向下滑动");
      });
 
 });
  jQuery("#btn9").click(function(){
      jQuery("#box").slideUp(1000,function(){
          console.log("已执行向上滑动");
     });
 
 });
 jQuery("#btn10").click(function(){
     jQuery("#box").slideToggle(1000,function(){
         console.log("已改变向下/向上滑动");
     });
 
 });

　　

内置动画总结：jQuery内置动画基本都是调用一些jQuery内部封装的方法实现（把DOM元素的CSS样式进行修改），可以实现一些简单元素的操作，适用的效果有限且使用范围并不是很广，多数以配合自定义动 画为主。

二、jQuery自定义动画(核心代码如下)

1、在jQuery中可以通过 animate() 方法创建自定义的动画的。

     语法：$(selector).animate({params}, speed, easing, callback);

     animate()，它可以实现任意动画效果，我们需要传入的参数就是DOM元素最终的CSS状态和时间，jQuery在执行时间段内不断调整CSS直到达到我们设定的值。

  //操作单个元素代码如下：
  
  jQuery("#btn1").click(function(){
         jQuery("#box").animate({
              left:500
          },1000);//在1秒钟内CSS过渡到设定值
  
  //操作多个元素代码如下：
  
 jQuery("button").click(function(){ 
 　　　jQuery("div").animate({ 
             left:'250px', 
             opacity:'0.5', 
             height:'150px', 
             width:'150px' 
         }，1000); 
    });

　　

       注：在使用animate()方法是，它可以操作所有的css属性，但操作css中复合样式时切记要使用驼峰式命名。例 font-size  x  ；fontSize  √

2、对于 jQuery 的动画的设计我们要分 层面理解：

每一个动画效果可以看作一个独立的动画对象，每个对象都实现了针对自己这个动画的生命周期的控制

animate()与animate()之间是同步执行，animate()与其他方法(css)是异步执行

动画对象与动画对象之间其实是没有直接关系，但是为了做到连续调用就需要引入一套队列机制也就是 Queue(异步转同步)
来控制对象之间的转换的控制

  //操作一个元素，queue使其同步执行代码如下：
  
  jQuery("#btn1").click(function(){        
          jQuery("#box").animate({
                  left:500
              }).animate({
                  top:500
              }).queue(function(next){
                  jQuery("#box").css({
                     background:"yellow"
                 })
                 next();
             }).animate({
                left:0
             })
     })

　　

 3、jQuery的动画效果通过delay()方法还可以实现暂停，通过stop()方法还可以实现停止

     多次动画执行过程是按照动画开启的顺序，依次执行，执行完前一个使用，后一个才能开始执行，如果前一个正在执行，那么后面所有动画都在等待

     停止动画要分两个动作进行，一个当前动画，一个是等待动画。要完全停止既要清除当前动画，又要删除等待动画

         语法：$(selector).stop(stopAll, goToEnd);

         stop方法接收了两个参数：都是布尔值

             参数1：表示动画队列的操作

                 true:删除队列

                 false:没有删除队列

             参数2：表示当前动画的操作

                 true:当前动画立即运动到终点

                 false:当前动画停止

  //暂停代码如下：
  
   jQuery("#btn").click(function(){
          // delay：延迟执行动画
      jQuery("#box").delay(1000).animate({
             left:600
          }).delay(1000).animate({
              top:600
         }).delay(1000).animate({
             left:0
         }).delay(1000).animate({
             top:30
         })

         // 停止：
         jQuery("#box").animate({
            left:600
         },1000).animate({
             top:500
        },1000)
     })　

//停止操作示例代码如下：

    jQuery("#btn2").click(function(){
        jQuery("#box").stop(true,false);//stop方法接收了两个参数：都是布尔值
    })