1. 程式人生 > >jQuery animate動畫

jQuery animate動畫

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>

jQuery animate動畫

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>

jQuery animate動畫