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

不明白为什么左移不了

<!DOCTYPE html>

<html>

div

{

margin: 10px 0px;

}

span

{

position:absolute;

width:80px;

height:80px;

border: solid 4px #ccc;

margin: 50px 50px;

background-color: Red;

color:White;

vertical-align:middle

}

</style>

<head>

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

</head>

<body>

<h3>创建按钮播放动画</h3>

$(function(){

$("left").bind("click",function(){

$("span").animate({

left:"-=50px"

},100,function () {

$("#tip").html("执行完成!");

})

});

</script>

</body>

</html>

帅气的小猫咪

2015-11-19

源自：jQuery基础课程 7-13

关注问题我要回答

312

操作

收起

1 回答

李晓健
2015-11-19

<!DOCTYPE html>
<html>
<style type="text/css">
    div
    {
        margin: 10px 0px;
    }
    span
    {
        position:absolute;
        width:80px;
        height:80px;
        border: solid 4px #ccc;
        margin: 50px 50px;
        background-color: Red;
        color:White;
        vertical-align:middle
    }
</style>
<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>
<h3>创建按钮播放动画</h3>
<span></span>
<div id="tip"> </div>
<input id="left" type="button" value="左移"></br>
<input id="right" type="button" value="右移">
<script type="text/javaScript">

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

            $("span").animate({
                left:"-=50px"

            },100,function () {
                $("#tip").html("执行完成!");
            })
        })
    });


</script>
</body>
</html>

24行上面多了一个 </

30行 id＝"left" 的等号是中文的

35行 $("#left") id选择器要加 #

以上行数对应我的代码