How can I add units to a Transform CSS Property with jQuery?

Question

I am making a simple vertical carousel of elements using jQuery, it's all ready but I have a problem with the Transform property because working with him its a little weird. I display de code for more understanding:

let element_height = $(".faq-carousel li.visible").outerHeight(true) + 5;

$(".faq-carousel li").css("transition", "transform 0.5s")
$(".faq-carousel li").css("transform", "translateY(-" + element_height + "px)" );

setTimeout( function() {
$(".faq-carousel li").css( { transition: "none" } ) }, 500 );

$(".faq-carousel li.visible").removeClass('visible').next().addClass('visible')

It's a simple problem, but I can't find the way to add px to the "translateY()". They replace the old px with the new ones and it does not move almost.

If you know a solution I will be very thankful!!

Answer 1

I found a better solution, i will share it to help those who are looking for something similar:

let carousel_height = 0;

  $("#faq_carousel_arrow_down").click(function(e) {

    let element_height = $(".faq-carousel li.visible").outerHeight(true) + 5;
    carousel_height += parseInt(element_height);

    $(".faq-carousel li").css("transition", "transform 0.5s")

    $(".faq-carousel li").css("transform", "matrix(1, 0, 0, 1, 0, -" + carousel_height + ")" );

    $(".faq-carousel li.visible").removeClass('visible').next().addClass('visible')

    e.preventDefault();
  });

And the HTML:

<ul class="faq-carousel">
  <li class="item shadow t1 visible">
    <div>
    </div>
  </li>
  <li class="item shadow t2">
    <div>
    </div>
  </li>
</ul>
<a href="#" id="faq_carousel_arrow_down"><i class="fas fa-angle-down"></i></a>