为了账号安全,请及时绑定邮箱和手机立即绑定

分享答案~~

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery动画特效</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    </head>
    
    <body>
        <button id="btn1"/>左移</button>
        <button id="btn2"/>右移</button>
        <div style="width:50px;height:50px;background:blue;position:absolute;left:50px"></div>
        <script>
        $(function(){
            $("#btn1").click(function(){
                $("div").stop();
                $("div").animate({left:"-=50px"},1000);
            })   
            $("#btn2").click(function(){
                $("div").stop();
                $("div").animate({left:"+=50px"},1000);
            }) 
        })
        </script>
    </body>
</html>

正在回答

2 回答

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>jQuery动画特效</title>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

        <style>

            div{

                position:absolute;

                left:80px;

                top:80px;

                width:80px;

                height:80px;

                border:1px solid #ff0000;

            }

        </style>

    </head>

    

    <body>

        <input type="button" id="btn1" value="左移" />

        <input type="button" id="btn2" value="右移" />

        <div>

            

        </div>

    </body>

    <script>

        $(function(){

            $("#btn1").bind("click",function(){

                $("div").stop().animate(

                    {left:'-=50px'},3000

                )

            })

    

            $("#btn2").bind("click",function(){


                $("div").stop().animate(

                    {left:'+=50px'},3000

                )

            })


        })

    </script>

</html>


2015-12-29



0 回复 有任何疑惑可以回复我~

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>jQuery动画特效</title>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

        <style>

            div{

                position:absolute;

                left:80px;

                top:80px;

                width:80px;

                height:80px;

                border:1px solid #ff0000;

            }

        </style>

    </head>

    

    <body>

        <input type="button" id="btn1" value="左移" />

        <input type="button" id="btn2" value="右移" />

        <div>

            

        </div>

    </body>

    <script>

        $(function(){

            $("#btn1").bind("click",function(){

                $("div").stop().animate(

                    {left:'-=50px'},3000

                )

            })

    

            $("#btn2").bind("click",function(){

                $("div").stop().animate(

                    {left:'+=50px'},3000

                )

            })


        })

    </script>

</html>


0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
jQuery基础课程
  • 参与学习       154768    人
  • 解答问题       7184    个

加入课程学习,有效提高前端开发速度

进入课程

分享答案~~

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信