Jquery动画停止在前一个动画之后的特定元素上工作

Question

我一直在用HTML和Jquery的小滑块玩弄。它应该通过滑动屏幕来实现，无论是向左还是向右，取决于用户导航的方式，然后通过动画返回到原始起点。

尽管只要点击'左'动画，'右'动画就不会再生成动画了。

点击'正确'动画对'左'动画没有影响，它仍然看起来工作正常，但反过来这是一个不同的故事，我不知道为什么。

我做了一个JSfiddle我的问题。

我已阅读Reset CSS Animation的一篇文章，但它似乎没有帮助我。

也许有人可以帮助我发现我缺少什么

HTML：

<!-- Product Slider --> 
    <div id="index_slider_container" class=""> 

     <a id='slide_left' href'#'>left</a> 

     <!-- Slider shaft --> 
     <div id="slider_shaft" class=""> 
      <div id="slider_product_container" class=""> 

       <!-- Product Image --> 
       <div id="slider_product_image" class=""> 

       </div> 

       <!-- Product name --> 
       <div id="slider_product_name" class=""> 

       </div>    
      </div> 
     </div> 
     <a id='slide_right' href'#'>right</a> 
    </div> 

JQuery的

// Slider left 
$("#slide_left").click(function(){ 

    $("#slider_shaft").css('left', '100%'); 

    // Set time out and return div VIA animation 
    setTimeout(function(){ 
     $("#slider_shaft").animate({left: '0%'}, 500); 
    }, 200); 

}); 

// Slider right 
$("#slide_right").click(function(){ 

    $("#slider_shaft").css('right', '100%'); 

    // Set time out and return div VIA animation 
    setTimeout(function(){ 
     $("#slider_shaft").animate({right: '0%'}, 500); 
    }, 200); 

}); 

CSS

#index_slider_container { 
position: relative; 
height: 120px; 
width: 97%; 
margin: 15px; 
overflow: hidden; 
border: 1px solid; 
text-align: center; 
} 

#slider_shaft { 
position: relative; 
height: 120px; 
width: 100%; 
border: 1px solid; 
text-align: center; 
} 

#slider_product_container { 
display: inline-block; 
height: 100%; 
width: 120px; 
border: 1px solid; 
margin-left: 5px; 
} 

#slider_product_image { 
height: 80%; 
width: 100%; 
border: 1px solid; 
} 

#slider_product_name { 
height: 20%; 
width: 100%; 
border: 1px solid; 
} 

#slide_left { 
border: 1px solid; 
padding: 5px; 
cursor: pointer; 
position: absolute; 
z-index: 5; 
left: 0; 
top: 0; 
} 

#slide_right { 
border: 1px solid; 
padding: 5px; 
cursor: pointer; 
position: absolute; 
z-index: 5; 
right: 0; 
top: 0; 
} 

Answer 1

尝试向相反的方向设定为auto：

$("#slider_shaft").css('left', '100%');  
$("#slider_shaft").css('right', 'auto'); 

和

$("#slider_shaft").css('right', '100%');  
$("#slider_shaft").css('left', 'auto'); 

的问题是left属性保持设置，右按钮被点击后还是一样。您需要将其恢复为默认值。