jquery - jquery动画不会工作

Question

jQuery 新手在这里。

我想用两个按钮做一个简单的水平滚动功能。我想用动画来做。但是当我点击其中一个按钮时，什么也没有发生......

继承人的jQuery代码：

<script type="text/javascript">
$(document).ready(function() {
    $('#right-button').click(function {
        $('#box').animate({
        left: +="200px"
        }, "fast");
    });

    $('#left-button').click(function {
        $('#box').animate({
        left: -="200px"
        }, "fast");
    });
});
</script>

这是 HTML 代码：

<section id="main">
    <span class="scrollbutton left" id="left-button">(</span>
    <span class="scrollbutton right" id="right-button">)</span>
    <div id="box">
        <div class="column"></div>
        ...
    </div>
</section>

（我也用 a-Tag 试过）

Aaaaand 这是CSS：

#main {
    border: solid 1px #fff;
    max-height: 480px;
    width: auto;
    display: block;
    overflow: hidden;
    background: #ddd;
}

#main #box {
    width: 2250px;
    display: inline;
    float: left;
    position: relative;
}

#main .column {
    float: left;
    display: inline;
    padding: 10px;
    width: 429px;
    border-left: solid 1px #333;
    height: 460px;
}

.scrollbutton {
    font-family: "WebSymbolsRegular";
    font-size: 30px;
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.left {
    float: left;
}

.right {
    float: right;
}

这可能是一个非常幼稚的错误，但我只是不知道它是什么......我希望你能帮助我:)

PS：你可以在这里找到它：http: //patrickmanser.ch/pixelsword/

Answer 1

$('#right-button').click(function() {
        $('#box').animate({
        left: "+=200px"
        }, "fast");
    });

    $('#left-button').click(function() {
        $('#box').animate({
        left: "-=200px"
        }, "fast");
    });

功能（） ;-）

Answer 2

尝试：

$(document).ready(function() {
    $('#right-button').click(function {
        $('#box').animate({
        left: "+=200px"
        }, "fast");
    });

    $('#left-button').click(function {
        $('#box').animate({
        left: "-=200px"
        }, "fast");
    });
});

Answer 3

你有错误的动画函数语法，在

left: +="200px"

+= 符号应在引号内。所以应该是这样的

left: "+=200px"

对其他参数执行相同操作。

此外，

1. 您应该移动 .column 而不是 #box .. .column 在 #box 内。我认为它应该被移动。
2. 放置位置：相对于.column。
3. 至少从 .column 中删除 float:left 。

在这里查看工作小提琴 http://jsfiddle.net/gaLKc/

Answer 4

 $('#right-button').click(function {
    $('#box').animate({
    left: "+=200"
    }, "fast");
});

不是“200px”应该是“=+200”