首页 > 代码库 > jQuery自定义动画

jQuery自定义动画

2024-09-21 07:34:24   217人阅读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery自定义动画</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js "></script>
    <script>

        $(function () {
           //同步动画
       $("#star").click(function () {   //start()开始

           $("#text1").animate({"width":"500px"},3000);
           $("#text2").animate({"width":"500px"},3000);
           $("#text3").animate({"width":"500px"},3000);
           $("#text4").animate({"width":"500px"},3000)
       })
       $("#stop").click(function () {  //stop()结束
           $("#text1").stop();
       })
        })

    </script>
    <style>
        div{
            width: 100px;
            height: 50px;
            background-color: lightpink;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>


<div id="text1">雷克萨斯</div>
<div id="text2">英菲尼迪</div>
<div id="text3">凯迪拉克</div>
<div id="text4">华晨宝马</div>

<button id="star">开始动画</button>
<button id="stop">停止动画</button>




</body>
</html>

jQuery自定义动画


联系
我们