How to add margin with each click with 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);
  })

This just fixes the margin value, I need to slide my content on the other hand so by pressing next and prev I need to slide it around, kind of obvious.

Thanks.

edit:

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

and the 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> 

It's in other divs as well, but they are not relevant I think.

Answer 1

To add to the previous value use +=:

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

Answer 2

I don't know the full extent of your code, but I don't think adding/subtracting margin is the way to go. What I think you want to do actually is make a wrapper div around the content and have it's position set to relative OR absolute depending on what you want to do. Then you can adjust the left/top properties.

It is possible to adjust the margin's also.

With jQuery animate() or css() you can specify relative values like

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

I used 'margin-left' because I find it easier to read because it's the same as what you'd type in your CSS rules. Make sure you have quotes around it. Without quotes you must use the Javascript style of words without dashes as you have.

Also! don't put px or any other units. It takes an integer.

Example JSfiddle: http://jsfiddle.net/hososugi/svFEs/2/