我正在尝试访问动态事件的elapsedTime
属性,如MDN所示。
当我检查对象时,我可以看到具有相应值的属性,但是当我在控制台中记录它时,我得到了未定义。以下是示例代码:
HTML
<div id='box'></div>
CSS
#box {
position:absolute;
top:0;
left:0;
width:50px;
height:50px;
background:red;
animation: move 5s infinite;
}
@keyframes move {
0% { left: 0; }
50% { left:90%; }
100% { left: 0;}
}
JS
$("#box").on("animationiteration webkitAnimationIteration", function (e) {
console.log(e.elapsedTime); // this logs undefined
});
我设置了一个小提琴here
答案 0 :(得分:1)
正确的语法是
console.log(e.originalEvent.elapsedTime);
在javaScript事件中,变量是elapsedtime,因此您可以像访问它一样访问它
javascriptevent.elapsedTime
但是,您正在jQuery中设置事件功能。 jQuery事件有很多镜像的javascript变量,但不是全部。
要访问jQuery事件中未镜像的javascript变量,您将在jQuery事件中拥有 originalEvent 对象,即原始javascript事件。
所以,语法是
jQueryEvent.originalEvent.elapsedTime
使用相同的语法访问jQuery事件中未镜像的所有变量
答案 1 :(得分:0)
我通过在function onAnimationProgress(event)
中添加以下代码行来修复它
if (ev.elapsedTime === undefined) ev.elapsedTime = maxDuration;