Slider не движется снова Jquery

Question

Я создал ползунок с помощью CSS и имеет две ссылки, как левый и правый, когда пользователь нажимает на двигаться влево ползунка перемещается влево на 500px и когда один нажимает на двигаться вправо затем ползунок перемещается прямо на 500 пикселей. Проблема в том, что он движется только один раз. Я хочу, чтобы он двигался каждый раз, когда пользователь нажимает на Перемещение влево или Перемещение вправо.

Вот HTML код:

<div id="genericslider"> 
    <a href="#" class="left">Move Left</a> 
    <a href="#" class="right">Move Right</a> 
     <div id="content" class="scroller touchcarousel wide"> 



      <ul class="block-list scroller touchcarousel-container"> 

       <li id="post-833" class="post-833 graff-history type-graff-history status-publish hentry touchcarousel-item intro"> 
        <header class="entry-header"> 
         <h1 class="formatted-title"> 
                <span style="padding-left:0px;font-size:25px">Press Releases</span> <span class="part-1"></span></h1> 

        </header><!-- .entry-header --> 
        <div class="entry-content"> 
        Our presence in Indian Press 
     &nbsp;   </div> 
     <p style="font-size:10px !important" ><a href="#" id="click"> Click and drag your mouse</a></p> 
       </li><!-- #post-833 --> 

         <li class="touchcarousel-item history-items horiz hide-before-ready" style="width: 17700px;"> 

     <div id="post-833" class="post-833 graff-history type-graff-history status-publish hentry history-item"> 

      <div class="entry-thumbnail"> 


      <div class="entry-content"> 
          <h2 class="heading" style="padding-top:290px"><a href="#">3<sup>rd</sup> Aug 2013</a></h2> 
          <p>Kolhapur Times</p> 
         <div class="building-icon"> <img width="174" height="175" src="../../images/12345.jpg" class="attachment-history-thumbnail wp-post-image" alt="Times Asia" title="Times Asia" style="box-shadow: 5px 5px !important";/></a> </div> 

      </div> 

     </div> 

     <div id="post-839" class="post-839 graff-history type-graff-history status-publish hentry history-item"> 
      <div class="entry-content"> 
          <h2 class="heading" style="padding-left:10px"><a href="#">4<sup>th</sup> Aug 2013</a></h2> 
          <p style="padding-left:10px">Kolhapur Times</p> 
        <div class="building-icon"><img width="174" height="175" src="../../images/23456.jpg" class="attachment-full" alt="Times Gehena Pune" title="Times Gehena Pune" /></div> 

      </div> 

     </div> 

     <div class="post-839 graff-history type-graff-history status-publish hentry history-item"> 
      <div class="entry-content"> 
          <h2 class="heading" style="padding-top:290px"><a href="#">16<sup>th</sup>Aug 2013</a></h2> 
          Bangalore Times</h2> 
        <div class="building-icon"><img width="174" height="175" src="../../images/TOIBG_2013_8_16_27.jpg" class="attachment-full" alt="Times Gehena Pune" title="Times Gehena Pune" /></div> 

      </div> 

     </div> 

     <div id="post-841" class="post-841 graff-history type-graff-history status-publish hentry history-item"> 
      <div class="entry-content"> 
          <h2 class="heading" style="padding-top:0px"><a href="#">30<sup>th</sup>Aug 2013</a></h2> 
          Bombay Times</h2> 
        <div class="building-icon"><img width="174" height="175" src="../../images/TOIM_2013_8_30_37.jpg" class="attachment-full" alt="Times Gehena Pune" title="Times Gehena Pune" /></div> 

      </div> 

     </div> 

     <div id="post-841" class="post-841 graff-history type-graff-history status-publish hentry history-item"> 
      <div class="entry-content"> 
          <h2 class="heading" style="padding-top:290px"><a href="#">13<sup>th</sup>Sep 2013</a></h2> 
          Ahmedabad Times</a></h2> 
        <div class="building-icon"><img width="174" height="175" src="../../images/TOIA_2013_9_13_24.jpg" class="attachment-full" alt="Times Gehena Pune" title="Times Gehena Pune" /></div> 

      </div> 
    </ul> 

    </div> 

Вот код Jquery:

<script> 
$(document).ready(function(){ 
$(".left").click(function(){ 
    $(".touchcarousel-item").animate({left:'-500px'}); 
    //alert(); 
}) 
$(".right").click(function(){ 
    $(".touchcarousel-item").animate({right:'-500px'}); 
}) 
}) 
</script> 

Answer 1

$("#genericslider").on("click",".left",function(e){ 
    e.preventDefault(); 
    $(".touchcarousel-item").animate({left:'-500px'}); 
    //alert(); 
}) 


$("#genericslider").on("click",".right",function(e){ 
    e.preventDefault(); 
    $(".touchcarousel-item").animate({right:'-500px'}); 
    //alert(); 
}) 

Answer 2

Проблема заключается в том, что вы анимировать элементы в той же точке. Как только вы нажмете одну из кнопок, вы живете до '-500px'. Как только вы нажмете его снова, он попытается снова оживить, но позиция уже '-500px', поэтому ничего не меняется.

Попробуйте следующий код:

<script> 
$(document).ready(function(){ 
$(".left").click(function(){ 
    var currentPosition = parseInt($(".touchcarousel-item").css('left')); 
    $(".touchcarousel-item").animate({left: currentPosition - 500}); 
    //alert(); 
}) 
$(".right").click(function(){ 
    var currentPosition = parseInt($(".touchcarousel-item").css('right')); 
    $(".touchcarousel-item").animate({right: currentPosition - 500}); 
}) 
}) 
</script> 

Кроме того, я хотел бы предложить анимировать только left или right значение, а не оба. Например: при нажатии .left вы живете left: currentPosition - 500, и когда вы нажимаете .right, вы анимируете left: currentPosition + 500.