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

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!!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source