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

为何实现不了点击向左向右移动

<!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>

        <style>

            div{ 

                position:absolute;

                top:50px;

                left:200px;

                height:50px;

                width:50px;

                border:1px solid red;

                background-color:red;

            }

        </style>

    </head>

    

    <body>

        <div></div>

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

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

        <p></p>

        <script type="text/javascript">

            $( function (){

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

                    $("div").animate({

                    right: "+=50px"

                },3000);

            });

            

            $( function (){

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

                    $("div").animate({

                        left:"+=50px"

                    },3000);

                });

            });

            

        </script>

    </body>

</html>


正在回答

4 回答

$(document).ready(function (){
                $("#left").bind("click",function(){    //这儿之前function没加反括号
                    $("div").animate({left:"-=50px"},3000);
                }); 
            });                //这儿之前漏掉了
             
            $(document).ready(function (){
                $("#right").bind("click",function(){
                    $("div").animate({left:"+=50px"},3000);
                });
            });

不明原因styles用right不生效 你改成left试下 我用火狐能出效果

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

yshnbest 提问者

谢谢,Chrome的right不生效
2015-11-06 回复 有任何疑惑可以回复我~

呵呵呵呵呵呵呵呵呵呵

并不是right 不生效。我们的animate是通过操控css属性来实现动画效果。所以这就是为什么animate()动画要在元素绝对定位or相对定位 后才能控制他的移动。而这里的right,left都只不过是css中absolute绝对定位的属性值。

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

私有前缀没加呢

0 回复 有任何疑惑可以回复我~
            $(document).ready(function (){
                $("#left").bind("click",function(){    //这儿之前function没加反括号
                    $("div").animate({right:"+=50px"},3000);
                }); 
            });                //这儿之前漏掉了
            
            $(document).ready(function (){
                $("#right").bind("click",function(){
                    $("div").animate({left:"+=50px"},3000);
                });
            });

主要问题是没有初始加载,然后就是有一点语法错误 把这段代码覆盖原部分就好了


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

yshnbest 提问者

怎么还是没有反应呢
2015-11-06 回复 有任何疑惑可以回复我~

举报

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

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

进入课程

为何实现不了点击向左向右移动

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