3 
  })
  //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);
  })

这只是固定边距值，另一方面我需要滑动我的内容，所以通过按 next 和 prev 我需要滑动它，有点明显。

谢谢。

编辑：

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

4

2 回答 2

5

要添加到以前的值，请使用+=：

$('.social').animate({marginLeft: '+=940px'}, 500);
                                 --^--
于 2012-11-06T22:05:34.513 回答
1

我不知道您的代码的全部范围，但我不认为添加/减去边距是要走的路。我认为您实际上想要做的是围绕内容制作一个包装器 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/

于 2012-11-06T22:20:38.913 回答