时间戳

首页 > 解决方案 > 无法控制 jQuery 动画持续时间

jquery - 无法控制 jQuery 动画持续时间

问题描述

我使用 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)

我错过了什么？

标签： jquerycss

解决方案

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

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

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

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

推荐阅读