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 に答える