如何将单位添加到带有 jQuery 的转换 CSS 属性？

Question

我正在使用 jQuery 制作一个简单的元素垂直旋转木马，它已经准备就绪，但我遇到了 Transform 属性的问题，因为与他一起工作有点奇怪。我显示 de 代码以获得更多理解：

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')

这是一个简单的问题，但我找不到将 px 添加到“translateY()”的方法。他们用新的替换旧的 px，它几乎没有移动。

如有解决方案，将不胜感激！！

Answer 1

我找到了更好的解决方案，我会分享它以帮助那些正在寻找类似东西的人：

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();
  });

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

如何将单位添加到带有 jQuery 的转换 CSS 属性？

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

html

javascript

jquery

carousel