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

怎么只能左一次右一次，再往左动不了了呢？但是可以一直往右。

<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 type="text/css">
        div{
            position:absolute;
            width:80px;
            height:80px;
            border-style:solid;
            color:red;
            margin:100px;
            }
            
        </style>
    </head>
    
    <body>
        <input id="btnLeft" type="button" value="左移" />
        <input id="btnRight" type="button" value="右移" />
        <div></div>
        <script>
            $(function(){
                $("#btnLeft").bind("click",function(){
                   $("div").animate({
                       right:"+=50px"
                   },3000); 
                });
                $("#btnRight").bind("click",function(){
                   $("div").animate({
                       left:"+=50px"
                   },3000); 
                });
                
            });
            
        </script>
        
    </body>
</html>

qq_浮若无所依_0

2015-10-20

源自：jQuery基础课程 7-13

关注问题我要回答

385

操作

收起

3 回答

闹小志回答被采纳 +3 积分
2015-10-20

lz有没有发现，你的程序运行之后第一次点击左移的时候，div框会跳到最右边，之后再左移，同样你再右移，它又会跑到最左边之后再右移。这是因为你两次操作操作了left和right两个不同的属性。

当我们一次左移一次右移之后，你的div的css发生了这样的变化：

同时有了left和right属性。

举个栗子：一个100*100的div，其中有一个60*60的子div，然后我们给这个子div设置margin-left:40px;margin-right:40px;你觉得子div会以哪个css属性为准呢？这个时候就会发生其中一个失效的情况（这里是margin-right失效）。

总结：个人理解，做这样的效果，尽量操作同一个css属性，使动画过度平滑，且不会出错。

以下是解决办法：

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

收起回答

qq_浮若无所依_0 提问者

非常感谢！

2015-12-16 回复有任何疑惑可以回复我~

小猪版纳
2015-10-30

把第一个right 改为left就可以了。

$(function(){

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

$("div").animate({

left:"-=50px"

},3000);

});

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

$("div").animate({

left:"+=50px"

},3000);

});

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

收起回答

Y_du
2015-10-20

$("#btnRight").bind("click",function(){
                   $("div").animate({
                       left:"－=50px"
                   },3000); 
                });

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

收起回答