jQuery animate動畫
阿新 • • 發佈：2019-01-08
1.例子：選項卡
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>選項卡</title>
<script type="text/javascript" src="../jQuery庫/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){ var $btn = $('.btns input'); var $slide = $('.cons .slide'); /*alert($div.length),判斷是否獲取*/ $btn.click(function(){ /*移出除當前的類，siblings選擇同輩元素*/ $(this).addClass('current').siblings().removeClass('current'); /*index（）顯示索引*/ /*$div.eq($(this).index()).addClass('div1').siblings().removeClass('div1');*/ /*stop()防止重複點選，animate（）動畫效果*/ $slide.stop().animate({'left':-500*$(this).index()}); }) }) </script>
<style type="text/css">
.btns input{ width: 100px; height: 40px; background-color: antiquewhite; border: 0;/*給寬高會有邊框*/ } .btns .current{ background-color: aqua; } .cons{ width: 500px; height: 200px; overflow: hidden; position: relative; } .slide{ width: 1500px; height: 200px; position: absolute; left: 0; top: 0; } .cons .slide div{ width: 500px; height: 200px; background-color: aquamarine; line-height: 200px; text-align: center; font-size: 30px; float: left; } /*.cons .div1{ display: block; }*/ </style>
</head>
<body>
<div class="btns"> <input type="button" name="" value="01" class="current"> <input type="button" name="" value="02"> <input type="button" name="" value="03"> </div> <div class="cons"> <div class="slide"> <div>選項卡1</div> <div>選項卡2</div> <div>選項卡3</div> </div> </div>
</body>
</html>
2.animate動畫
可以設定元素某屬性值上的動畫，可以設定一個或多個屬性值，動畫執行完成後會執行一個函式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>動畫</title>
<script type="text/javascript" src="../jQuery庫/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
/*分步執行，延時1000ms*/
$('.box').animate({'width':100},1000,function(){
$('.box').animate({'height':100},1000,function(){
$('.box').animate({'opacity':0.4});
});
});
})
$('#btn01').click(function(){
/*每次點選加一百*/
$('.box01').stop().animate({'width':'+=100'})
})
})
</script><style type="text/css">
.box,.box01{
width: 300px;
height: 300px;
background-color: antiquewhite;
}
</style></head>
<body>
<input type="button" value="動畫" id="btn">
<div class="box"></div>
<br>
<br>
<input type="button" value="動畫" id="btn01">
<div class="box01"></div></body>
</html>
