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

Question

当您通过移动图像将光标移到标题上时，我正在尝试创建视差效果。我让它与 .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');
});
});

控制台.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