1

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

$.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>
...

有人可以帮忙吗？

4

1 回答 1

1

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

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

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

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

或一元 + 运算符：

duration: +lval["in-duration"]
于 2012-11-28T15:27:34.783 回答