Geek asks and answers

Applying CSS transform using jQuery using a variable

I can get the code below if I do not use this variable. When I add a variable, it breaks.

$('.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>
+3
source share
2 answers

You need to add a type variable

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

Also you cannot subtract such a line, do 20-100

+3
source

You need concatenation

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

and you cannot subtract the line, you need the numbers # / p>

+1
source

More articles:


All Articles