jQuery animate动画详解

置顶林中明月间。

已于 2023-03-10 16:16:59 修改

阅读量7.8k

点赞数 2

分类专栏： JQuery 文章标签： jq动画

于 2018-08-21 15:55:18 首次发布

原文链接：http://caibaojian.com/jquery/animate.html

版权

JQuery 专栏收录该内容

61 篇文章 5 订阅

订阅专栏

jquery animate()方法动画详解（超简单易懂）_坚毅的小解同志的博客-CSDN博客

// animate():第一个参数：{width:200} 运动的值和属性
// 第二个-时间：默认400ms{},1000
//第三个-运动形式-两种：1.默认：swing(慢快慢) 2.linear(匀速)
//第四个-回调函数
//$(this).animate({width:"300px",height:"300px"},2000,'linear',function(){alert(123)});

//stop():默认阻止当前运动，不阻止所有，stop(true) 阻止后续所有运动，stop(true,true) 当前运动立马完成 = finish()立即完成运动。

stop(true,true) 停止到最终的目标点

finish() 立即完成运动。

运动前加stop()可以清除运动队列(不总是重复)。(鼠标移入移除 mouseover、out)

$(this).stop().animate({width:'200px'},1000) //针对的是同一个元素上面的效果

会用:

//动画延迟
.leftToRight{
    left:0;
}
$('.leftToRight').delay(800).animate({left:100px},"solw");

animated方法中没有封装transform属性

解决方案：
（1）css方法

$($sub).animate({},5000,function(){  
    $(this).css({'transform':'translateX(300px)'});  
})  
在动画函数的回调函数里执行。时间和效果就没了意义，毕竟函数是在动画完成之后才有调用

（2）addClass方法
可以通过addClass()方法来代替此动作： 
比如想旋转一个icon 
在css中加入一个class

Css代码
.add_transform{  
    transform:rotate(180deg);  
    -ms-transform:rotate(180deg);/* IE9 */  
    -moz-transform:rotate(180deg);/* Firefox */  
    -webkit-transform:rotate(180deg);/* Safari和Chrome */  
    -o-transform:rotate(180deg);/* Opera */  
    transition:all 0.5s ease-in-out;  
    -moz-transition:all 0.5s ease-in-out;/*Firefox 4 */  
    -webkit-transition:all 0.5s ease-in-out;/* Safari和Chrome */  
    -o-transition:all 0.5s ease-in-out;/* Opera */  
}  
 然后通过$(“选择器”).toggleClass(“.add_transform”);来使icon的旋转变为动画效果。

<script>
//jQuery动画animate和scrollTop结合使用
$('li').click(function(){
    //$(document).scrollTop($(this).index()*viewHeight);
     var H = $(this).index()*viewHeight;
     var heiGht = $('#div1').offset().top;
     $('html,body').animate({scrollTop: H}, 1000);
  });
</script>

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<style>
 #box { 
  width: 100px; 
  height: 100px; 
  background-color: red; 

  position:absolute; 
} 

#pox { 
  width: 100px; 
  height: 100px; 
  background-color: green; 
  position: absolute; 
  top: 200px; 
} 
</style>
</head>
<body>
	<input type="button" class="button" value="开始" />
	<input type="button" class="stop" value="停止" /> 
	    
	  <div id="box">box</div> 
	  <div id="pox">pox</div> 
<script type="text/javascript">
	 $(function () {   
	    $(".button").click(function () { 
	      $("#box").animate({ 
	        left: "300px"  //要想使用left top bottom right这种方向性的属性 先必须对"#box元素设置CSS 绝对定位 
	      }) 
	    })  
   
    //-------------------------------------同步动画  
    $(".button").click(function () { 
      $("#box").animate({ 
        width: "300px", 
        height: "200px", 
        opacity:0.5, //透明度为0.5 注：透明度的值在0-1之间 
        fontSize:"200px", //字体大小设为30px 
      }) //第一个参数：是一个对象，他是键值对的css 
    }) 

    //让指定元素左右移动
    $("#right").click(function(){
      $(".block").animate({left: '+50px'}, "slow");
    });

    $("#left").click(function(){
      $(".block").animate({left: '-50px'}, "slow");
    });

	//--------------------------------------列队动画,一个一个来 
    $(".button").click(function () { 
      $("#box").animate({ width: "300px"}, 1000, function(){ 
        $("#box").animate({height:"200px"},1000,function(){ 
          $("#box").animate({opacity:0.5},1000,function(){ 
            $("#box").animate({fontSize:"150px"},1000,function(){alert("完毕")}) 
          }); 
        }); 
      }); 
    }) 

	//在同一个元素的基础上，使用链式(队列)调用也可以实现列队动画 

    $(".button").click(function () { 
      $("#box") 
        .animate({ width: "300px" }, 1000) 
        .animate({ height: "200px" }, 1000) 
        .animate({ opacity: 0.5 }, 1000) 
        .animate({ fontSize: "150px" }, 1000, function () { alert("列队动画执行完毕")}) 
    }); 
	
	//那我们现在的需求是：不管你有几个元素，我都要他们依次实现列队动画效果。(测试了一下，只能用这种回调函数嵌套的方式来实现了) 
  
    $(".button").click(function () { 
      $("#box").animate({ width: "300px" }, 1000, function () { //box
        $("#pox").animate({ height: "200px" }, 1000, function () { //#pox
          $("#box").animate({ height: "200px"}, 1000, function () { 
            $("#pox").animate({ fontSize: "150px" }, 1000, function () { alert("列队动画执行完毕") }); 
          }) 
        }) 
      }) 
    }) 
	
	//那下面再来了解下，列队动画的停止 
      
    $(".button").click(function () { 
      $("#box")
      .animate({ left: "300px" },1000) 
      .animate({ bottom: "300px" }, 1000) 
      .animate({ width: "300px" }, 1000) 
      .animate({ height: "300px" }, 1000)                   
    }) 
  
    $(".stop").click(function () { 
     	$("#box").stop(true); // 加参数停止所有动画，不加停止当前 
    }) 

 //现在，我们想继续在.queue()方法后面再增加一个隐藏动画，这时发现居然无法实现。
这是.queue()特性导致的。
有两种方法可以解决这个问题，jQuery 的.queue()的回调函数可以传递一个参数，
这个参数是next 函数，在结尾处调用这个next()方法即可再链式执行列队动画。 
  
    //链式编程实现队列动画 
    $(".button").click(function () { //四个动画 
      $("#box") 
        .slideUp(1000) 
        .slideDown(1000) 
        .queue(function (next) { //这个next是一个函数 
        $(this).css("background", "yellow"); 
        next();}) 
        .hide(1000); 
    }); 
  
    //顺序编程实现队列动画 我们看到使用顺序调用的列队，逐个执行，非常清晰 
    $(".button").click(function () { 
      $("#box").slideUp(1000); 
      $("#box").slideDown(1000); 
      $("#box").queue(function (next) { 
      	$(this).css("background", "yellow"); 
    	next(); }); 
      $("#box").hide(1000); 
    }); 
  });
	</script>
</body>