Javascript 使用JQuery的TranslateX

TranslateX在JQuery中不适用于我。我想使用

.animate（）

方法而不是

.css（）

JavaScript

CSS

下面是一个使用

制作动画的例子。我添加了一些代码注释来引导您了解正在发生的事情

HTML:

您需要处理传递给
run（）
的值

有一个演示如何使用
translateY
，但是我发现乍一看代码有点难以理解，所以我对它进行了一些剖析，并使它适用于使用
translateX
的场景
 您测试哪个浏览器？您是否可能正在非webkit浏览器中测试此功能？试着使用这个：
-webkit transform
@Rotan075
transform
已经有4年左右不需要浏览器前缀了。@Turnip oh从来没有想过这一点。我总是用它来确定。谢谢，每天我们都能学到新东西，不是吗jquery动画方法不支持转换，所以需要使用cssmethod@Turnip它需要移动设备的供应商前缀我已经找到了一个更简单的版本，所以还是谢谢你！
$(".test").hover(function() {
    $(this).animate({'transform': 'translateX(100%);'}, 1000);
});

.test {
  background-color: #f9333c;
  width: 100%;
  height: 100%;
  transform: translateX(0%);
}

<h1 class="test">test</h1>

//Get the element you want to animate
var testElement = $('.test');

function run(v){
  //Reverse the array
  var reversed = JSON.parse(JSON.stringify(v)).reverse();

  $(v[0]).animate(v[1], {
      //The speed the element moves - lower is faster
      duration: 500,
      step: function(val) {
          //Adding the transform to your element
          testElement.css("transform", `translateX(${val}px)`); 
      },
      done: function(){
          //Re-running the function but in reverse with the reverse we did above
          run(reversed)
      }
  })
};

//Calling our function and passing in the parameters
run([{y:0}, {y:100}])