                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础课程

为什么移动不了

<!DOCTYPE html>

<html>

<head>

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

<style>

div{

width:80px;

height:80px;

border:1px solid red;

background-color:red;

position:absolute;

left:10px;

top:30px;

}

</style>

</head>

<body>

$(function(){

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

$("div").animate({

left:"-=50px";

},3000)

});

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

$("div").animate({

left:"+=50px";

},3000)

});

</script>

</body>

</html>

Triangel

2015-11-11

源自：jQuery基础课程 7-13

关注问题我要回答

289

操作

收起

3 回答

炸猪排超人
2015-11-30

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <title>jQuery动画特效</title>
        <style>
            div{
                width:80px;
                height:80px;
                border:1px solid red;
                background-color:red;
                position:absolute;
                left:10px;
                top:30px;
                }
        </style>
    </head>
    
    <body>
        <input type="button" value="左移" id="btn1"/>
        <input type="button" value="右移" id="btn2"/>
        <div></div>
    <script type="text/javascript">
        $(function(){
            $("#btn1").bind("click",function(){
                $("div").animate({
                    left:"-=50px" //你的代码这里多加了分号“;”，语法错误，运行失败
                },3000)
            });
            $("#btn2").bind("click",function(){
                $("div").animate({
                    left:"+=50px" //你的代码这里多加了分号“;”，语法错误，运行失败
                },3000)
            });
        });
    </script>
    </body>
</html>

你的代码有个语法错误，我在注释里说明了。可以直接复制代码去运行。

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

收起回答

Triangel 提问者
2015-11-13

<!DOCTYPE html>

<html>

<head>

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

<style>

div{

width:80px;

height:80px;

border:1px solid red;

background-color:red;

position:absolute;

left:10px;

top:30px;

}

</style>

</head>

<body>

$(function(){

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

$("div").animate({

left:"+=50px";

},3000)

});

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

$("div").animate({

left:"-=50px";

},3000)

});

</script>

</body>

</html>

这样也没有效果

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

收起回答

李晓健
2015-11-11

$(function(){
    $("#btn1").bind("click",function(){
        $("div").animate({
            left:"-=50px"  //这里不能加 ;
        },3000)
    });
    $("#btn2").bind("click",function(){
        $("div").animate({
            left:"+=50px"  //这里不能加 ;
        },3000)
    });
});

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

收起回答