使用JQuery TranslateX

Question

在JQuery中，TranslateX对我不起作用。我想使用.animate()方法代替.css()。

的JavaScript

$(".test").hover(function() {
    $(this).animate({'transform': 'translateX(100%);'}, 1000);
});

CSS

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

Answer 1

以下是使用animate的{​​{3}}。我添加了一些代码注释，引导您了解正在发生的事情。

HTML：

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

JavaScript的：

//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}])

您需要使用传递给run()的值。

有一个fiddle显示了如何使用translateY完成此操作，但是我发现代码有点难以乍一看，所以我已经解剖了一下并使其工作使用translateX的方案。