jquery - Click to continually remove specified number from margin

Question

Really fundamental question here... I am using the below jQuery to shift some elements around the page.

$('.homeProducts .next').click(function() {
        $('.productContainer').css('margin-left',-284);
})

What I'd like to happen is every time the next element is clicked the container has it's margin reduced by 284. My code will work once, but that's it. What am I missing?

Answer 1

You can use relative values

As of jQuery 1.6, .css() accepts relative values similar to .animate(). Relative values are a string starting with += or -= to increment or decrement the current value. For example, if an element's padding-left was 10px, .css( "padding-left", "+=15" ) would result in a total padding-left of 25px.

Try

$('.productContainer').css('margin-left','-=284');