與動畫jQuery的

Question

JS什麼有趣的問題

<div id="new-products" class="clear-fix"> 
<button id="scroll-left"></button> 
<div id="pics-scroll"> 
<img src="upload/upd_img_1.png" alt="Обувь"> 
<img src="upload/upd_img_2.png" alt="Обувь"> 
<img src="upload/upd_img_3.png" alt="Обувь"> 
<img src="upload/upd_img_1.png" alt="Обувь"> 
</div> 
<button id="scroll-right"></button> 
</div> 

我的CSS是在這裏（什麼有趣太）：

#new-products{ 
     height: 169px; 
     position: relative; 
     padding: 5px 0 5px 0; 
     background: #f2f2f2; 
    } 

    #new-products img { 
     float: left; 
     height: 169px; 
     width: 170px; 
     background: #ffffff; 
     width: 170px; 
     height: 169px; 
     margin: 0 20px 0 0; 
    } 

    #pics-scroll{ 
     position: absolute; 
     width: 1000px; 
     height: 169px; 
     margin-left:85px; 
    } 

    #scroll-left{ 
     float: left; 
     position: absolute; 
     cursor: pointer; 
     margin: 50px 5px 0 13px; 
     width: 54px; 
     height: 70px; 
     display: block; 
     background: url('../images/scroll-left.png')center no-repeat; 
    } 

    #scroll-right{ 
     cursor: pointer; 
     margin-left: 840px; 
     position: absolute; 
     margin-top: 50px; 
     width: 54px; 
     height: 70px; 
     display: block; 
     background: url('../images/scroll-right.png')center no-repeat; 
    } 

的主要問題是：反正它不動。

我不知道，爲什麼它不起作用。我怎樣才能使它工作。

Answer 1

你可以用你的代碼中$(window).load(function() {...});執行jQuery代碼之前，確保所有的DOM元素和圖像都已經正確加載：

$(window).load(function() { 
    $("#scroll-left").click(function() { 
     $("#pics-scroll").animate({ 
      "left": "+=50px" 
     }, "slow"); 
    }); 

    $("#scroll-right").click(function() { 
     $("#pics-scroll").animate({ 
      "right": "+=50px" 
     }, "slow"); 
    }); 
});