将 .css() 替换为 .animate() 并且它不起作用

Question

我正在尝试通过移动图像将光标移到 header 上时创建 parallax-ish 效果。我让它与 .css() 一起工作——我将其包含在下面代码中注释掉的行中——但我用 .animate() 替换了它，因为我想要缓动，但动画不起作用。

var width = 50 / $(window).width();
$('header').mousemove(function(e) {
    var pageX = e.pageX - ($(window).width() / 2);
    var newvalueX = width * pageX * -1 - 25;
    //$('#headerImg img').css('transform', 'translateX(calc(-50% - ' + newvalueX + 'px))');
    $('#headerImg img').animate({
        'transform': 'translateX(calc(-50% - ' + newvalueX + 'px))'
    }, 'slow', function() {
        console.log('check');
    });
});

console.log 确实有效，并且没有错误，但 .animate() 本身什么也不做。我在想这一定是我的愚蠢行为！

Answer 1

您可以使用缓动 css:

#headerImg img{
  transition-timing-function: ease-in;
  transition: 0.2s;
}

更多信息： https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp

将 .css() 替换为 .animate() 并且它不起作用

Replaced .css() with .animate() and it's not working

jquery

jquery-animate