如何使用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中，但我认为它们不相关。

- user1740375

Answer 1

要增加先前的值，请使用 +=：

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

- elclanrs

Answer 2

我不知道你的代码的全部情况，但我认为添加/减少边距并不是正确的方法。实际上，我认为你想做的是在内容周围创建一个包装器div，并将其位置设置为相对或绝对，具体取决于你想要做什么。然后，你可以调整左/上属性。

也可以调整边距。

使用jQuery animate()或css()，你可以指定相对值，例如：

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

我使用 'margin-left' 是因为我认为它更容易阅读，因为它与您在 CSS 规则中键入的内容相同。确保您在其周围加上引号。没有引号，您必须使用 JavaScript 风格的单词，不带破折号。

另外！不要放置 px 或任何其他单位。它需要一个整数。

示例 JSfiddle：http://jsfiddle.net/hososugi/svFEs/2/

- Hososugi

---

你说这可能不是最好的主意。嗯，事实上我现在确实有一个问题，我把它放在一个包装器里，内容移动得很好，但是它无限地移动，我的意思是边距。我该如何限制范围？我有3个幻灯片，我需要在第一个幻灯片上去掉“返回”导航按钮，在最后一个幻灯片上去掉“下一个”按钮。我会在原帖中放上必要的代码。 - user1740375

抱歉回复晚了。我个人会检查父元素（即“social”包装器div的父元素）的宽度，并查看您的div的margin-left/left属性是否： a）小于某个值-> 隐藏/禁用“后退”。 b）大于某个值-> 隐藏/禁用“下一个”。您可以使用jQuery的.parent()和.children()选择器非常动态地获取每个宽度并进行一些计算。我现在没有时间，但是当我到达工作岗位时，我可以稍微更改我的jsFiddle。 - Hososugi