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”