无法控制 jQuery 动画持续时间答案

【问题标题】：Can't control jQuery animation duration无法控制 jQuery 动画持续时间
【发布时间】：2021-09-07 22:53:58
【问题描述】：

我在一个网站上使用 CSS 属性“clip-path”创建了一个滑块，基本上有两张图片，一张在另一张前面，前面的图片被剪掉或向左“滑动”以完全显示背景。我能够做到这一点的唯一方法是使用 jQuery 步进函数。我想控制动画的持续时间，但让浏览器一直卡在无限循环中，并且持续时间也无法正常工作。

这是我的代码：

$(document).ready(function() {              
     $({step: 50}).animate({step: 100}, {
   step: function(val) {
     $('.et_pb_fullwidth_header_0').css("clip-path", "inset(0% " + val + "% 0% 0%)");
   }
})
})

“.et_pb_fullwidth_header_0”是我的图片。

根据 jQuery 的文档，在这种情况下，需要在我的第二个参数即“{step: 100}”之后添加持续时间。

然后看起来像这样：

$(document).ready(function() {              
         $({step: 50}).animate({step: 100}, 5000, {
       step: function(val) {
         $('.et_pb_fullwidth_header_0').css("clip-path", "inset(0% " + val + "% 0% 0%)");
       }
    })
    })

但这会在浏览器上创建一个无限循环并出现错误：

Uncaught TypeError: Cannot read property 'length' of undefined
    at init.s.fx.s.Tween.run (jquery-migrate.min.js?ver=3.3.2:2)
    at u (jquery.min.js?ver=3.6.0:2)
    at Function.S.fx.tick (jquery.min.js?ver=3.6.0:2)
    at ot (jquery.min.js?ver=3.6.0:2)

我错过了什么？

【问题讨论】：

标签： jquery css

【解决方案1】：

好的，我想通了，所以让我回答我自己的问题。哈哈！

所以我需要在代码本身中设置持续时间，即：

$(document).ready(function() {              
     $({step: 50}).animate({step: 100}, {
duration: 5000,
   step: function(val) {
     $('.et_pb_fullwidth_header_0').css("clip-path", "inset(0% " + val + "% 0% 0%)");
   }
})
})

而不是在第二个参数之后直接添加持续时间。好吧，我希望这对某人有帮助！

【讨论】：