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"]

Jquery延迟和动画持续时间

1 个答案: