无法控制jQuery动画持续时间，修改后浏览器无限循环报错如何解决？

问题原因 #

你的报错来自$.animate()方法的参数格式使用错误。jQuery的animate方法存在两种合法的传参模式，你修改后的代码混用了两种模式，导致jQuery内部解析参数异常，才抛出类型错误、触发无限循环：

• 模式1（对象配置模式，更推荐）：.animate(动画属性对象, 配置项对象)，所有动画相关的配置（时长、step回调、缓动函数、完成回调等）都统一放在第二个参数的配置对象中
• 模式2（扁平参数模式）：.animate(动画属性对象, 时长[, 缓动函数][, 完成回调])，仅支持传递四个位置参数，不能额外传入配置对象

修正方案 #

直接将动画时长5000作为duration属性，放到你最开始写的配置项对象里即可，正确代码如下：

$(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%)"); 
    } 
  }) 
})

如果需要额外配置缓动效果、动画完成回调，直接在配置对象中追加对应属性即可，示例：

$(document).ready(function() { 
  $({step: 50}).animate({step: 100}, { 
    duration: 5000,
    easing: 'linear', // 匀速动画
    step: function(val) { 
      $('.et_pb_fullwidth_header_0').css("clip-path", "inset(0% " + val + "% 0% 0%)"); 
    },
    complete: function() {
      // 动画完成后执行的逻辑
      console.log('滑块动画已完成')
    }
  }) 
})

内容的提问来源于stack exchange，提问作者Andy359