Applying CSS transform with jQuery using a variable

Question

I can get the below code working when I don't use the variable. When I add the variable it breaks though.

$('.right, .auto_slide').click(function() {
    var slider_margin = parseInt($(this).closest('.slider').css('transform',"translateX"));
    var new_margin = slider_margin - pane_width;
    $(this).closest('.slider').css('transform',"translateX("+new_margin"+)");
});

HTML

<section class="stage" id="basic">
    <div class="slider" style="transform: translateX(0px);">

        <!-- Content -->

    </div>
</section>

Answer 1

You need to add the variable like this

$('.thing').click(function() {
    var whatever = 20 - 100;
    $('.slider').css('transform',"translateX("+whatever+"px)");
    //                                       ^^like this^^ 
});

Also you cant subtract string like that, do 20-100

Answer 2

You need to concatenation

$('.thing').click(function() {
    var whatever = 20 - 100;
    whatever += "px";
               //^ add px
    $('.slider').css('transform',"translateX("+whatever"+)");
                                            //^         ^  
});

and you can not subtract string you need numerbs