Decrement value by javascript variable inside the css property

Question

I wanna move content with animation. There's an animation in the jquery function, like that:

.on('click', '.btn', function () {
  var contentWidth = $(window).width() - $('.sidebar').width();
  $( ".content" ).animate({
      left: "+=1000",
    }, 5000, function() {
      // moving content function
    }
  );
});

So, because I have various positions of content, I need to use this value in the variable contentWidth. How I can set this value in a variable and decrement the left value every time when I call a function? Something like left: "+=contentWidth" doesn't work. Is where I make mistake?

Answer 1

Not sure if i got it but...

maybe you could use string interpolation

.on('click', '.btn', function () {
   var contentWidth = $(window).width() - $('.sidebar').width();
     $( ".content" ).animate({
       left: `+=${contentWith}`,
     }, 5000, function() {
     // moving content function
   }
 );

});

Not tested but should work theoretically