CODEWITHSUNDEEP
javascriptjquerycss
evu
evu

Reputation: 1071

jQuery Incremental Percentage Change in .css()

The following code works:

  $('.container').css({
    'left': '-100%' 
  });

This code doesn't:

  $('.container').css({
    'left': '-=100%' 
  });

It's instead changed to pixels. I've tried adding the % on the end as a string but it still doesn't work. I can't figure out how to get it to stay as a percentage whilst incrementing/decrementing.

Is it possible?

Upvotes: 1

Views: 1030

Answers (3)

PraJen
PraJen

Reputation: 606

http://jsfiddle.net/Praveen16oct90/tNYVJ/

Its working here.. Please look at this..

$(document).ready(function(){
 $("button").click(function(){
  $("div").animate({left:'-=10%'}, 5000, 'linear');
 });
});

Upvotes: 2

Aravind
Aravind

Reputation: 609

I'd suggest you to use the following method!

Jquery 

var x = $('#element');
x.css('left', (parseFloat(x.css('left')) + 10) + '%');

CSS

#element{
  left : 5%;
  position : relative; //Its important
}

Here's the fiddle. Hope this helps.

Upvotes: 0

Ravi Gadag
Ravi Gadag

Reputation: 15861

you can use animate() Animate() function to increment the percentage

$('#yourId').animate({
            left: previousLeftValue+IncrementValue //Assuming that previous left value is stored somewhere
        }, 300 );

Upvotes: 0

Related Questions