jQuery动画2
先展示一下結構與樣式部分
三個按鈕控制小方塊的運動
代碼如下
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.demo {width: 50px;height: 50px;background-color: darkcyan;position: absolute;left: 70px;top: 70px;}button {width: 50px;height: 30px;line-height: 30px;outline: none;border: none;border-radius: 3px;background-color: #ccc;color: #fff;cursor: pointer;margin-bottom: 5px;display: inline-block;}</style> </head><body><button class="run">run</button><button class="stop">stop</button><button class="finish">finish</button><div class="demo"></div> </body>?.animate()
作用：根據一組 CSS 屬性，執(zhí)行自定義動畫。可傳參數：target，duration，easing，callback
【例1】實現兩段運動，效果如下
方法一：回調函數實現
<!-- jQuery庫 --> <script src="./jquery.js"></script> <!-- easing --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js'></script> <script>//傳參 target duration easing callback$('button').click(function name(params) {$('.demo').animate({width:'+=30px', height: '+=30px', left: '+=150px', top: '+=150px'}, 1000, 'linear',function () {$('.demo').animate({width:'+=30px', height: '+=30px', left: '+=150px', top: '-=150px'}, 1000, 'linear');});}) </script>方法二：鏈式調用
$('.run').click(function name(params) {$('.demo').animate({ width: '+=30px', height: '+=30px', left: '+=150px', top: '+=150px' }, 1000, 'linear').delay(1000).animate({ width: '+=30px', height: '+=30px', left: '+=150px', top: '-=150px' }, 1000, 'linear');}).stop()
作用：停止匹配元素當前正在運行的動畫，可傳參數 null, true, (true, true)
【例1】在上例中添加stop方法，使動畫停止
情況1：傳null
//stop(null)—— 結束當前動畫，直接執(zhí)行下一動畫 $('.stop').click(function () {$('.demo').stop(); })效果：由下圖可知點擊stop按鈕之后，結束當前動畫，執(zhí)行delay，再執(zhí)行下一動畫
情況2：傳true
//stop(true) —— 直接停止所有動畫 $('.stop').click(function () {$('.demo').stop(true); })效果
情況3：傳(true, true)
//stop(true,true) —— 停止當前動畫，跳到當前動畫的目標位置，并且結束所有動畫 $('.stop').click(function () {$('.demo').stop(true,true); })效果
.finish()
作用：停止當前正在運行的動畫，刪除所有排隊的動畫，并完成匹配元素所有的動畫
代碼
$('.finish').click(function () {console.log(1);$('.demo').finish(); })效果如下
?
總結
- 上一篇： jQuery动画1
- 下一篇： 一张图get jQuery所有方法