jquery - 如何使用 jQuery 在每次点击时添加边距？

Question

  })
  //NEXT
  $('.social-next a').on('click', function(e){
    e.preventDefault();
    $('.social').animate({marginLeft: '-940px'});
  })
  //PREVIOUS
  $('.social-previous a').on('click', function(e){
    e.preventDefault();
     $('.social').animate({marginLeft: '940px'}, 500);
  })

这只是修复了边距值，另一方面我需要滑动我的内容，因此通过按下一个和上一个我需要滑动它，这很明显。

谢谢。

编辑:

.social {
  width: 2820px;
  overflow: hidden;
}

.social .slide {
  width: 940px;
  float: left;
  overflow: hidden;
}


.social-previous {
  position: absolute;
  top: 50%;
  left: 0;
}

.social-next {
  position: absolute;
  top: 50%;
  right: 0;
}

和 html:

        <div class="social">
            <div class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima error.<a href="#" class="show-slides">Check it!</a></div>

            <div class="slide">
                <div class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima error.<a href="#" class="open-slides"></div>
                <div class="content">dolor dolor dolor <a href="#" class="close-slides"></a></div>
            </div>

            <div class="slide">
                <div class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima error.<a href="#" class="open-slides"></div>
                <div class="content">ipsum ipsum ipsum ipsum ipsum<a href="#" class="close-slides"></a></div>
            </div>

            <div class="slide">
                <div class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima error.<a href="#" class="open-slides"></div>
                <div class="content">Lorem Lorem Lorem Lorem Lorem<a href="#" class="close-slides"></a></div>
            </div>

        </div> 

它也在其他 div 中，但我认为它们不相关。

Answer 1

要添加到先前的值，请使用+=:

$('.social').animate({marginLeft: '+=940px'}, 500);
                                 --^--