与动画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"); 
    }); 
});