jQuery的动画

动画

1 定义好的动画方法

• 显示隐藏：宽高透明度

  • show(speed,easing,callback) ： 显示

  • hide(speed,easing,callback) ： 隐藏

  • toggle(speed,easing,callback) ： 开关效果

  • 参数：

    • speed：运动时间

      值：number ms

      ​ 关键字：fast(200)，normal(400) slow(600)

    • swing:运动方式

      值：linear：匀速 swing：慢–快--慢

    • callback：回调函数

  ​ 值：linear：匀速 swing：慢–快--慢

• 淡入淡出：透明度

  • fadeIn(speed,easing,callback) ： 淡入
  • fadeOut(speed,easing,callback) ： 淡出
  • fadeToggle(speed,easing,callback) ： 开关
  • fadeTo(speed,to,easing,callback)：透明到

• 划入划出：高度

  • slideDown(speed,easing,callback) ： 划入
  • slideUp(speed,easing,callback) ： 划出
  • slideToggle(speed,easing,callback) ： 开关

2 自定义动画

• 第一种用法

  $("标签").animate({运动参数},speed,easing,callback)
  	参数：
          {}：运动参数
          speed：运动时间 默认是400
          easing： linear swing
          callback：回调函数
  

  //1.动画队列(queue): 每一个animate会自动加入到动画队列，排队执行
  $("div").animate({"width":500},500);
  $("div").animate({"height":500},500);
  
  //2.同时运动
  
  $("div").animate({"width":500,"height":500});
  
  //3.show、hide、toggle直接作为目标值使用
  $("div").animate({"width":"hide"});  //0
  $("div").animate({"width":"show"});  //元素本身的宽度
  
  //4.累加
  $("button").click(function(){
      $("div").animate({"left":"+=50"});
  })
  
  
  //5.链式操作,css不是动画，不会加入到动画队列，会跟着动画队列中的一个动画开始执行
  $("div").animate({"width":500})
      .animate({"height":500})
      .queue(function(next){
          $("div").css("background","deeppink");
          // $("div").dequeue();  从队列中移除，不建议使用
          next();
  	})
      .animate({"opacity":0.5});
  

• 第二种用法

  $("标签").animate({},{options})  
  	options可能的值：
          duration - 设置动画的速度
          easing - 规定要使用的 easing 函数
          callback - 规定动画完成之后要执行的函数
          queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始
          false：当前动画运动的时候，后面紧跟着的动画一起执行
  

  $("div").animate({"width":500},{"duration":1000,"queue":false});
  $("div").animate({"height":500},{"duration":1000,});
  

3 停止动画

停止动画:$().stop(clearQueue,gotoEnd)
参数
	clearQueue：是否停止动画队列中所有的动画，默认是false
		false：只停止当前正在运动的动画，其他的照常执行
		true：停止所有的动画
	gotoEnd：当前运动动画停止的时候，是否立刻到达目标点，默认是false
			false：点那就停那
		true：点击停止，当前动画，立刻到目标点
	
	finish():停止所有的动画，都会立即到达目标点

4 滚动条运动

$("html,body").animate({"scrollTop":值});

5 其他方法

.delay(时间)：延迟执行
$().is(":aniated"):判断当前元素是否存在动画

$("button").click(function(){
    /* $("div").delay(3000) //延迟
                    .animate({"opacity":0.5}); */
    var is = $("div").is(":animated"); //判断当前标签上是否存在动画,true-有 false-没有
    console.log(is);
    if(!is){
        $("div").animate({"width":"toggle"});
    }
})