此代码有什么问题？

Question

I am trying to use jquery animate function to animate boxes but this simple code seems to jerk me off. 我正在尝试使用jquery animate函数来对框进行动画处理，但是这个简单的代码似乎让我讨厌。 I am not sure what have I mistaken ? 我不确定我弄错了什么？ Sometimes the similar code would work perfect and sometime it seems very difficult. 有时，类似的代码会完美地工作，有时似乎很难。

<!doctype html>

    <html>
        <head>
            <script src="jquery.js">
            </script>

            <style>
                #main{
                    clear:both;
                }
                #boxes{
                    position:absolute;
                    width:75%;
                }
                #box1, #box2, #box3{
                    position:relative;
                    width:200px;
                    height:200px;
                    background-color:#FFD600;
                    margin:10px;
                }
                #buttons{
                    float:right;
                }
                input{
                    display:block;
                    width:150px;
                }
            </style>

            <script>
            $('document').ready(function(){
                $("#left").bind('click', function(){
                    console.log('Left');
                    $('#box1').animate({x:"+=20px"});
                });

            });
            </script>

        </head>
        <body>
            <div id="main">
                <div id="boxes">
                    <div id="box1">

                    </div>

                    <div id="box2">

                    </div>

                    <div id="box3">

                    </div>
                </div>

                <div id="buttons">
                        <input type="button" value="Left" id="left">
                    <input type="button" value="Right" id="right">
                    <input type="button" value="Top" id="top">
                    <input type="button" value="Bottom" id="bottom">
                    <input type="button" value="Height" id="height">
                    <input type="button" value="Width" id="width">
                </div>
            </div>
        </body>
    </html>

Try it on JSFiddle. 试试吧上的jsfiddle。

Answer 1

x isn't a CSS property. x不是CSS属性。 Try left : left尝试：

$('#box1').animate({left:"+=20px"});

Try it on JSFiddle. 试试吧上的jsfiddle。

Answer 2

Try this it works perfectly : 试试这个，它完美地工作：

$("#left").click(function(){
console.log('Left');
$('#box1').animate({left: '+=50'});

}); }）;

Answer 3

x: "+=20px"

should be: 应该：

left: "+=20px"

JSFIDDLE DEMO JSFIDDLE演示

Answer 4

Change this line: 更改此行：

$('#box1').animate({x:"+=20px"});

to this: 对此：

$('#box1').animate({left:"+=20px"});

The positions in CSS are top and left , not x and y. CSS中的位置在top和left ，而不是x和y。 Works here: http://jsfiddle.net/jfriend00/47vMV/ . 在这里工作： http : //jsfiddle.net/jfriend00/47vMV/ 。

此代码有什么问题？

问题描述

4 个解决方案

解决方案1
4 已采纳 2011-12-02 04:48:06

解决方案2
2 2011-12-02 04:59:41

解决方案3
1 2011-12-02 04:47:55

解决方案4
0 2011-12-02 04:49:56

此代码有什么问题？

问题描述

4 个解决方案

解决方案1 4 已采纳 2011-12-02 04:48:06

解决方案2 2 2011-12-02 04:59:41

解决方案3 1 2011-12-02 04:47:55

解决方案4 0 2011-12-02 04:49:56

解决方案1
4 已采纳 2011-12-02 04:48:06

解决方案2
2 2011-12-02 04:59:41

解决方案3
1 2011-12-02 04:47:55

解决方案4
0 2011-12-02 04:49:56