[英]How can I add units to a Transform CSS Property with jQuery?
我正在使用 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,它几乎没有移动。
如果您知道解决方案,我将非常感激!!
我找到了一个更好的解决方案,我将分享它以帮助那些正在寻找类似东西的人:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.