jQuery - Getting an elements "left" position and then change it

Question

I am trying to manipulate a slider script with custom jquery. I need to grab and elements "left" css style position and then change it by adding 300px.

Here is my jquery:

var slCon = $('.slides-control');
var pos = slCon.css("left");
slCon.css({'left': pos + '300px'});

If I "alert(pos)" it does give me the inline left position of say -1000. But I need to be able to add 300px to that inline style to make it -700 when a button is clicked. I can't seem to get it to alter the inline style of the element after it grabs the initial value.

Please Help. I'm still learning jQuery.

Answer 1

Soo. I got it working cause the elements width matches the elements left position but the left is in a negative number. So I just grabbed the elements width and then set the left position with that using this:

var slCon = $('#slides-control');
var width = slCon.width();
slCon.css({'left': - width + 300 + 'px'});

Thanks for all the help taxicala

Answer 2

Try this:

$('.slides-control').css('left','+=300px');

Answer 3

You should do as follows:

var slCon = $('.slides-control').first();
var pos = slCon.css("left");
slCon.css({'left': pos + 300});

Or better, change to id (remember to update the dom accordingly):

var slCon = $('#slides-control');
var pos = slCon.css("left");
slCon.css({'left': pos + 300});