Question

我正在尝试使用jquery animate函数来动画框，但是这个简单的代码似乎让我感到震惊。我不确定我弄错了什么？有时类似的代码会完美有效，有时似乎非常困难。

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

JSFiddle上的

Try it。

Answer 1

x不是CSS属性。试试left：

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

JSFiddle上的

Try it。

Answer 2

试试这个效果很好：

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

}）;

Answer 3

x: "+=20px"

应该是：

left: "+=20px"

<强> JSFIDDLE DEMO

Answer 4

更改此行：

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

到此：

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

CSS中的位置为top和left，而不是x和y。在这里工作：http://jsfiddle.net/jfriend00/47vMV/。

这段代码有什么问题？

4 个答案: