jquery（4）动画 animate

$(selector).animate({params},speed,callback);

 

          $（对象）.animate({动作}，速度，完成之后要进行的函数)

 

例1  移动  （left  right   top bottom  ）

<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'},500,);
  });
});
</script> 

          css码中，要加入position:absolute;绝对定位，才能移动。

 

例2 颜色变换

    1.要下载jquery.colorAnimations.js这个插件，

    2.要加载这个插件：<script src='jquery.animate-colors.js'></script>，

    3.不能直接用 英语单词（如red、blue、等待）来表示颜色；只能用“#000000”或“rgb(20,20,20)”这两种格式

<script>
	$(document).ready(function(){
		$("button").click(function(){
			$("div").animate({backgroundColor:"#554422"},800,);
		});
			
	});
	</script>

      rgb(20,20,20)

例3  透明变化

<script>
	$(document).ready(function(){
		$("button").click(function(){
			$("div").animate({backgroundColor:'#006675',opacity:'0.4'},800,);
		});
			
	});
	</script>

 

例4 字体大小 、颜色

<script>
$(document).ready(function(){
		$("button").click(function(){
			$("div").animate({fontSize:"40",color:"#ADE1C6"},800,);
		});
			
	});
	</script>