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属性は右のボタンをクリックした後でも、設定したままということです。それをデフォルトに戻す必要があります。