如何使用jQuery在每次单击时添加边距？

这只是修正了边距值，我需要在另一方面滑动我的内容，所以通过按下下一步和上一步，我需要滑动它，有点明显

谢谢

编辑：

以及html：

.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;
}

Lorem ipsum dolor sit amet，奉献精英。最小误差。
Lorem ipsum dolor sit amet，奉献精英。最小误差。
Lorem ipsum dolor sit amet，奉献精英。最小误差。
Lorem ipsum dolor sit amet，奉献精英。最小误差。

---

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

要添加到前面的值，请使用

+=

：

        <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，并根据您想要做的事情将其位置设置为相对或绝对。然后可以调整左/顶属性

也可以调整利润率

使用jQuery animate（）或css（）可以指定相对值，如

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

我使用了“左边距”，因为我发现它更容易阅读，因为它与您在CSS规则中键入的内容相同。确保你有引号围绕它。如果没有引号，您必须使用Javascript风格的单词，而不使用破折号

还有！不要放置px或任何其他装置。它需要一个整数

---

示例JSfiddle:

您说过这可能不是最好的主意。我现在确实有一个问题，我把它放在一个包装里，内容移动得很好，但它移动得无穷无尽，我指的是边缘。如何限制范围？我有3张幻灯片，我需要在第一张幻灯片上丢失“后退”导航按钮，在最后一张幻灯片上丢失“下一步”。我会把必要的代码放在原来的帖子里。很抱歉回复太晚了。我个人会做的是检查父级的宽度（“社交”包装div的父级），并查看div的marginleft/left属性是否为：a）小于一定数量->隐藏/禁用“back”。b） 大于一定数量->隐藏/禁用“下一步”。您可以通过使用jQuery的.parent（）和.children（）选择器来动态地完成这项工作，以获取每一项的宽度并进行一些计算。我现在没有时间，但我可以在上班时稍微改变一下我的JSFIDLE。

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

$('.social-next a').click(function(e){
   e.preventDefault();
   $('.social').animate({'margin-left': '-=40'});
});