Jquery延迟和动画持续时间

Question

我正在尝试编写分层滑块，我使用此代码为图层设置动画：

$.each(data, function(key, val) {
   $.each(val, function(lkey, lval) {
    $("#"+lval['layer-id']).stop(false, true).delay(lval['in-delay']).animate(
      {left: '+='+(lval['left']-lval['start-left'])+'px'}, 
      {queue: true, duration: lval['in-duration']} , 
      'easeOutBack');
    });
 });

延迟工作正常，但动画持续时间不起作用，所有图层似乎具有相同的动画速度，但在我的 html 代码中，每个图层都有自己的持续时间值：

...
<div class="f-layer" 
data-start-top="120" 
data-start-left="-300" 
data-end-top="" 
data-end-left="" 
data-top="120" 
data-left="300" 
data-in-delay="1000"
data-out-delay="1300" 
data-in-duration="8000"
data-out-duration="500" 
data-in-easing="easeOutExpo"
data-out-easing="easeOutExpo"
data-in-effect="easeOutExpo"
data-out-effect="easeOutExpo"> 
<div class="f-img"><img src="images/4.jpeg"/></div> 
</div>
...

请有人帮忙。

Answer 1

animate() 的duration 选项可以是字符串或以毫秒表示的数字。有效字符串为"fast" 和"slow"，分别代表200 和600 毫秒。

在您的情况下，lval["in-duration"] 是一个字符串，因为它来自data- 属性，但既不是"fast" 也不是"slow"，因此它是无效的，因此被忽略。

您必须将其转换为数字，或者使用parseInt()：

duration: parseInt(lval["in-duration"], 10)

或者unary + operator：

duration: +lval["in-duration"]