jquery定义两个按钮,分别控制一个DIV的左移或右移

定义两个按钮,分别控制一个DIV的左移或右移

[cce_js]
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <style>
    div {
        position: relative;
        left: 500px;
    }
    
    span {
        position: relative;
        left: 500px;
    }
    </style>
</head>

<body>
    <div>我爱祖国</div>
    <span>我爱祖国</span>
    <button id="left1">左移</button>
    <button id="right1">右移</button>
    <script>
    $("#left1").bind("click", function() {
        $("div").animate({
            left: "-=50px"
        }, 3000, function() {
            $(this).stop();
            $("span").html("执行完成");

        })
    })

    $("#right1").bind("click", function() {
        $("div").animate({
            left: "+=50px"
        }, 3000, function() {
             $(this).stop();
            $("span").html("执行完成")

        })
    })

    </script>
</body>

</html>

[/cce_js]

发表评论

邮箱地址不会被公开。