jquery - .click 只能与 .css 一起使用一次

Question

我正在尝试制作一个自定义 slider 。

我想要什么:每次我单击“.c-button”时，我希望“.belt”类移动-290px。

发生了什么:“.belt”仅在第一次单击时进行翻译，之后的每次单击都不会执行任何操作。帮忙？

$(".c-button").click(function() {
    $(".belt").css({"transform":"translateX(-290px)"});
  });

Answer 1

这不是 CSS 转换属性的工作原理。这会将当前变换设置为距离元素正常位置正好 290 像素。

为了增加翻译量，您需要读取当前值，然后将其解析为整数，然后添加(好吧，减去)290 像素，然后执行基于该值的翻译。

$(".belt").click(function(){
  var posX = parseInt($(".belt").css('transform').split(/,/)[4]);
  posX -= 290;
  console.log(posX);
  $(".belt").css('transform','translatex('+posX+'px)');
});