javascript - jQuery .click() 激活 addClass() & 类使用转换 : translate to move element

Question

我正在制作一个图像 slider ， slider 的两侧各有两个箭头。例如，当 .click() .rightArrow 时，会添加一个名为 .moveRight< 的类 ( .addClass() )/.

.moveRight{
    transform: translate(760px,0);
    -webkit-transform: translate(760px,0); /** Safari & Chrome **/
    -o-transform: translate(760px,0); /** Opera **/
    -moz-transform: translate(760px,0); /** Firefox **/
}

问题是这个点击事件只触发一次。我想这是因为我告诉可移动元素去一个特定的位置。

每次我 .click() .rightArrow 时，我都希望元素继续向右移动一定数量的像素。

jQuery

$( document ).ready(function() {
  $('.rightArrow').click( function() {
    $('.imgGluedToThis').removeClass("moveLeft");
    $('.imgGluedToThis').addClass("moveRight");
  });
  $('.leftArrow').click( function() {
    $('.imgGluedToThis').removeClass("moveRight");
    $('.imgGluedToThis').addClass("moveLeft");
  });
});

这是HTML

      <img src="rightArrow.png" class="rightArrow">
      <img src="leftArrow.png" class="leftArrow">
      <div class="pictures-container">
        <div class="imgGluedToThis">
          <div class="picture-container">
            <a href="#openModal1">
           <img src="house.png" class="picture">
          </a>
          </div>
          <div class="picture-container">
            <a href="#openModal1">
            <img src="building.png" class="picture">
            </a>
          </div>
          <div class="picture-container">
            <a href="#openModal1"> 
            <img src="house2.png" class="picture">
            </a>
          </div>
          <div class="picture-container">
            <a href="#openModal1">
           <img src="house.png" class="picture">
          </a>
          </div>
          <div class="picture-container">
            <a href="#openModal1">
            <img src="building.png" class="picture">
            </a>
          </div>
          <div class="picture-container">
            <a href="#openModal1"> 
            <img src="house2.png" class="picture">
            </a>
          </div>          
        </div>
      </div> 

Answer 1

使用 css() jQuery 中的方法

$(document).ready(function() {
  $('.rightArrow').click( function() {
     $('.imgGluedToThis').css('left','+=10px');
  });
  $('.leftArrow').click( function() {
     $('.imgGluedToThis').css('left','-=10px');
  });
});

FIDDLE

或使用 animate() 方法

$(document).ready(function() {
  $('.rightArrow').click( function() {
      $('.imgGluedToThis').animate({'left':'+=10px'});
  });
  $('.leftArrow').click( function() {
      $('.imgGluedToThis').animate({'left':'-=10px'});
  });
});

FIDDLE