Question

jQuery-newbie here。

我想用两个按钮做一个简单的水平滚动功能。我想用动画来做。但当我点击其中一个按钮时，没有任何反应......

继承人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");
    });

function（）; - ）

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

你有错误的动画功能语法，At

left: +="200px"

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

left: "+=200px"

与其他参数一样。

此外，

你应该移动.column而不是#box .. .column在#box中。我认为它应该被移动。
把位置：相对于.column。
至少从.column中删除float：left。

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

Answer 4

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

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

jquery动画不会工作

4 个答案: