Question

jQuery-newbie here.

I want to do a simple horizontal scroll function with two buttons. I want to do it with animate. But when I click on one of the buttons, nothing happens…

Heres the jQuery Code:

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

This is the HTML code:

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

(I’ve also tried it with an a-Tag)

Aaaaand here’s the 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;
}

It’s probably a very naive error, but I just have no idea what it is… I hope you can help me 🙂

PS: You can find it here: 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() 😉