jQuery 动画效果

学习要点

显示隐藏
滑动卷动
淡入淡出
自定义动画
队列动画方法
动画相关方法
动画全局属性

显示隐藏

jquery中显示方法为show() 隐藏方法为hide(),在无参数的时候，只是硬性的显示内容和隐藏内容。

$(".class").click(function(){
   $("#box").show();        //显示
})

$(".class").click(function(){
   $("#box").hide();       //隐藏
})

注意hide()方法其实就是在行内设置css代码。display:none;而show()方法要根据元素是区块还是内联来决定。要是区块就是display:block;要是内联就是display:inline.

在show()和hide()方法里可以传递参数，这个参数以毫秒来控制速度,并且含有匀速变大变小，以及透明度变化

$(".class").click(function(){
     $("#box").show(1000);   //显示用了1秒
})

$(".class").click(function(){
   $("#box").hide(1000);  //隐藏用了1秒
})

除了直接使用毫秒来控制速度，jQuery还提供了三种预设速度 slow ,normal 和fast分别对应600毫秒，400毫秒，200毫秒

$("#div1").click(function(){
   $("#box").show('fast');  //200毫秒
})

$("#div1").click(function(){
 $("#box").hide('slow');  //600毫秒
})
特别注意的就是不管传递毫秒数还是传递预设字符串，如果不小心传递错误或者传递空字符串。那么他将采取默认值400毫秒.
$("#div1").click(function(){
  $("#box").show();
})

使用show()和hide()回调函数，可以实现队列动画

$(".div1").click(function(){
       $("#box").show('slow',function(){
          alert("动画执行完毕");
})
//队列动画，使用函数名调用自身
$(".show").click(function(){
    $("div").first().show('fast',function showspan(){
         $(this),next().show('fast',showspan);
       })
})
//队列动画，使用arguments.callee匿名函数自己调用
$(".show").click('slow',function(){
    $("#div1").show('fast',arguments.callee)
})

我们在使用hide()和show()的时候如果需要一个按钮切换操作。需要进行一些条件判断，而jquery给我们提供了一个类似功能的独立方法。toogle()

 $(".div").click(function(){
        $(this).toggle('slow');
})

(二) 滑动卷动

jquery提供了一组改变元素高度的方法.slideUp()和slideDown()和slideToggle() 顾名思义向上卷动，向下展开

$(".down").click(function(){
   $("#div1").slideDown();
})  //向下展开

$(".down").click(function(){
   $("#div1").slideUp();  //向上收缩
})

$(".down").click(function(){
  $("#div1").slideToggle()
})

注意: 滑动，卷动和显示隐藏一样。具有相同的参数

淡入淡出

jquery提供了一组专门用于透明度变化的方法fadeIn()和fadeOut()和fadeToggle()

 $("#div1").click(function(){
   $("#box").fadeOut('slow');  //淡出  
})
$("#div2").click(function(){
  $("#box").fadeIn('slow');  //淡入
})
$("#div2").click(function(){
  $("#box").fadeToggle();  //淡入
})

上面这3个透明度只能是从0到100，或者100到0 如果我们想设置指定值就只有fadeTo方法

$("#toggle").click(function(){
      $("#box").fadeTo('slow',0.33);  //0.33表示33
})

注意淡入淡出和显示，隐藏一样。具有相同的参数，对于fadeTo方法，如果本身大于指定值，会淡出

自定义动画

当上述几种满足不了我们的需求时候，我们要用的就是自定义动画animate()动画

$("#box").animate({
   "width":"400px",
  "height":"500px",
 "fontSize":" 30px",
 "opacity": 0.4
})

一个css变化就是一个动画效果，上面已经有4个CSS变化，已经实现了多重动画同步效果

必传的参数只有一个，键值对的参数，还有两个可选的参数分别是速度和回调函数

$("#box").click(function(){
$("#yundong").animate({
    "width":"400px",
  "height":"300px",
  "opacity":0.4
},1000,function(){
   window.alert("动画执行完毕")
})

})

到目前为止，我们都是创建固定位置不动的动画，如果要实现运动状态的位移动画，那就要结合css的绝对定位功能

 $("#box").click(function(){
    $("#move").animate({            //必须先设置css绝对定位
          "left":"+=300px",           //每一次都会300
          "top":"200px"
      },1000)
})

实现列队的动画方式有两种，第一种在回调函数中在执行一个动画，第二种通过连缀或顺序来实现动画。

$("#box").click(function(){
   $("#box1").animate({"left","100px"});
   $("#box1").animate({"top","100px"});
   $("#box1").animate({"width","100px"});
   $("#box1").animate({"height","100px"});
})

这里特别注意的就是如果不是同一个元素就会实现同步动画。

通过回调实现队列动画

$("#box").click(function(){
  $("#box").animate({
   "left":"300px"
    },1000,function(){
        $("#box").animate({"width":"300px"},1000)   
    })
})

通过连缀实现队列动画

$("#box").click(function(){

 $("$box2").animate({"width":"300px"}).animate({"height":"200px"}).animate({"left":"200px"});

})

列队动画方法

当连缀无法实现按顺序列队。那我们必须要用css方法了。但是css()方法会在一开始就传入列队之前。那么可以采用动画方法的回调函数来解决。
所以jQuery提供了一个类似回调函数的方法queue()

 $("#box").slideUp('slow').slideDown('slow').queue(function(){
   $(this).css("background","#ccc");
})

当我想在queue后面再添加一个动画效果的时候，做不到。这个时候就必须在结尾处调用next()方法

 $("#box").slideUp('slow').slideDown('slow').queue(function(next){
   $(this).css("background","#ccc");
   next();
}).hide('slow');

如果使用顺序调用，那么使用列队动画就非常清晰了。每一段代表一个列队。

$("#box").slideUp();  //卷起来
$("#box").slideDown();  //卷下来
$("#box").queue(function(){
      $(this).css('background','orange');
      next();
})
$("#box").hide('slow');

动画相关的方法

很多时候需要停止正在运行的动画，所以jquery提供了一个stop()方法，代表是否清空未执行完的动画队列。

$("#box2").click(function(){
   $("#box").stop();  //停止动画
})；
$("#box2").click(function(){
  $("#box2").stop(false,true);
})

第一个参数表示是否取消列队动画，默认是false。如果参数为true,当有列队动画的时候，会取消后面的列队动画。第二个参数表示是否到达当前动画的结尾，默认是false，如果参数为true则停止后立即到达结尾

延迟

有的时候动画需要延迟执行于是jquery提供了delay()方法.

$("#div1").delay(1000).animate({
   "left":"300px"
})

备注关于队列动画

有的时候来回切换浏览器的时候，会产生大量的队列动画。
这样来回切换的时候会突然间爆发出来。
所以在使用队列动画的时候，前面必须要加stop

 $("#box2").stop().animate({
     "width":"1000px",
    "height":"400px",
   "left":"+=200px"
},1000)