jquery動畫不會工作

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> 

（我也嘗試它有一個標籤）

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

你有animate函數的語法錯誤，在

left: +="200px" 

+ =符號應該是引號內。所以它應該是這樣的

left: "+=200px" 

做與其他參數相同。

此外，

1. 你應該將代替#box .COLUMN .. .COLUMN裏面#box。我認爲它應該被移動。
2. 放置位置：相對於.column。
3. 刪除float：至少從.column離開。

看到這裏的工作小提琴 http://jsfiddle.net/gaLKc/

Answer 4

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

不是 「200像素」，它應該是 「= + 200」