javascript - 这段代码有什么问题?

标签 javascript jquery

我正在尝试使用 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>

Try it在 JSFiddle 上。

最佳答案

x 不是 CSS 属性。尝试 left :

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

Try it在 JSFiddle 上。

关于javascript - 这段代码有什么问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8351877/

相关文章:

c# - 如果 Visibility 设置为 false(使用 C#),则访问隐藏字段值

JavaScript 正则表达式问题

javascript - 我正在开发 XDK 应用程序。使用此代码进行的任何更正

javascript - 我如何将按钮放在文本区域内并限制文本区域的大小?

javascript - 语法错误 : Parse Error only happens in safari

javascript - Angular 1 ng-如果不显示div

javascript - 使用 javascript 在 div 内显示上午/下午时间

javascript - 列出包装 Shiny 传单的输入处理程序

javascript - 使用 jQuery 同步滚动?

jQuery 选择器每行的第一个 td