09-jquery 动画 滑动选项卡示例

通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。

$("#div1").animate({

"width":300,height:400},1000,"swing",function(){ alert("done!")

})

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            //可以直接动画，改变了宽度，200后面不加单位可以，要是加上px就需要将200px加上引号
            // $(".box").animate({'width':600})

            //也用按钮控制动画
            $("#btn").click(function(){
                //这样长和宽一起动
                //$(".box").animate({"width":600,"height":400})

                //可以设置回调，比如让宽变了之后，再调用一个函数让长度变化
                $(".box").animate({"width":600},1000,function(){
                    $(".box").animate({"height":600},1000,function(){
                        $(".box").animate({"opacity":0})
                    })
                })
            })
        })

    </script>
    <style>
        .box{
            width:100px;
            height:100px;
            background-color:gold;
        }
    </style>
</head>
<body>
    <input type="button" value="moving" id="btn">
    <div class="box"></div>
</body>
</html>

参数可以写成数字表达式：

$("#div1").animate({
width:'+=100',
height:300
},1000,function(){
alert("done!");
})

$("#btn2").click(function(){
                //点击一次，增加100宽度,但是这个有多次点击重复动画的bug
                // $(".box2").animate({width:'+=100'})

                //修复上面的bug
                $(".box2").stop().animate({width:'+=100'})
            })

 

滑动选项卡示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .btns input{
            width:90px;
            height:35px;
            background-color:#666;
            font-size:16px;
        }

        .btns .active{background-color:gold;}

        .con{
            width:500px;
            height:300px;
            position: relative;
            overflow:hidden;
        }

        .con .slide{
            width:1500px;
            height:300px;
            position:absolute;
            left:0;
            top:0;


        }

        .con .slide div{
            width:500px;
            height:300px;
            background-color:gold;
            float:left;
            text-align:center;
            line-height:300px;
            font-size:30px;
        }

    </style>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            var btn = $(".btns input")
            var slide = $(".slide")

            btn.click(function(){
                $(this).addClass("active").siblings().removeClass("active");
                //这是用css做切换
                // slide.css({"left":-500*$(this).index()})

                //我们用animate动画切换
                slide.animate({"left":-500*$(this).index()})

            })

        })

    </script>
</head>
<body>
    <div class="btns">
        <input type="button" value="001" class="active">
        <input type="button" value="002">
        <input type="button" value="003">
    </div>
    <div class="con">
        <div class="slide">
            <div>这是第1个元素</div>
            <div>这是第2个元素</div>
            <div>这是第3个元素</div>
        </div>
    </div>
</body>
</html>

 

posted @ 2019-03-26 21:45  greenfan  阅读(209)  评论(0)    收藏  举报