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动画

猜你喜欢