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');
    });
});

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

用.animate（）替换.css（）并且它不起作用

1 个答案: