<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
margin-top: 10px;
background: red;
}
.two{
background: blue;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
/*
第一個參數
接受一個對象，可以在對象中修改屬性。
第二個參數
指定動畫時常。
第三個參數
指定動畫節奏，默認就是swing，可寫可不寫
第四個參數
動畫結束后執行的回調函數。
*/
$("button").eq(0).click(function(){
// 三個參數的情況。
// $(".one").animate({
// width:500
// },1000,function(){
//
// });
//四個參數的情況,第三個參數可以控制運動的軌跡。liner是勻速執行。swing是默認的，前慢中快后慢
$(".one").animate({
marginLeft:500
},5000,"linear",function(){
});
$(".two").animate({
marginLeft:500
},5000,"swing",function(){
});
});
/*
* 累加屬性
* 在原本屬性的基礎上增加屬性。
* 需要在對象里的參數值寫字符串 "+=你想累加的數值"
*/
$("button").eq(1).click(function(){
$(".one").animate({
width:"+=100" //一次在原本基礎上增加100px
},1000,"linear",function(){
});
});
/*
* 關鍵字
* 使元素按照關鍵字進行動畫。
*/
$("button").eq(2).click(function(){
$(".one").animate({
//width:"hide" //使寬度隱藏。
width:"toggle" //如果有寬度就隱藏，沒寬度就顯示
},1000,"linear",function(){
});
});
});
</script>
</head>
<body>
<button>操作屬性</button>
<button>累加屬性</button>
<button>關鍵字</button>
<div class="one"></div>
<div class="two"></div>
</body>
</html>