亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

jQuery的動(dòng)畫效果

??? 2018-11-14 11:57:01 237
????：<!DOCTYPE html> <html> <head> <title>jQuery的動(dòng)畫效果</title> <meta charset="utf-8">     <script type="text/javasc 
<!DOCTYPE html>
<html>
<head>
	<title>jQuery的動(dòng)畫效果</title>
	<meta charset="utf-8">
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <style type="text/css">
    	div{width: 100px;height: 100px;background:#ccc;color: red;}
    </style>
    <script type="text/javascript">  
        $(document).ready(function(){
        	$("#bt1").click(function(){
    		// $('#box1').animate({left:'100px'},"slow");
    		$('#box1').animate({
    			height:'300px',
    			opacity:'0.6'
    		},1500);//先變高，顏色變淡
    		$('#box1').animate({
    			width:'300px',
    			opacity:'0.6'
    		},"slow");//再變寬
    		$('#box1').animate({
    			height:'100px',
    			opacity:'0.6'
    		},2000);//恢復(fù)為原來(lái)的高度
    		$('#box1').animate({
    			width:'100px',
    			opacity:'0.6'
    		},"slow");//恢復(fù)為原來(lái)的寬度
    		$('#box1').animate({
    			fontSize:'40px',
    			opacity:'1'
    		},1500);//字體變大，顏色恢復(fù)    		
  			});

  			$("#bt2").click(function(){
  				$("#box2").animate({
      				height:'+=50px',
      				width:'+=50px'
    			});
  			});
        })
    </script>
</head>
<body>
	<button id="bt1">開(kāi)始動(dòng)畫一</button><br>
	<div id="box1">變大</div><br>
	<button id="bt2">開(kāi)始動(dòng)畫二</button><br>
	<div id="box2"></div>
</body>
</html>

1.animate()方法一次可以操作多個(gè)css屬性，但是css的寫法需要改變，比如padding-left要寫成paddingLeft，font-size改為fontSize才行；

2.animate()方法可以使用規(guī)定效果的值，比如slow，fast等，也可以直接使用元素的當(dāng)前值，比如直接+或者-具體的值；

??? ??

?? ??