Jquery delay and animate duration

Question

I'm trying to code a layered slider I use this code to animate layers :

$.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');
    });
 });

the delay is working fine but the animation duration is not working, all layers seems to have the same animation speed but in my html code each layer have his own duration value :

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

can some one help please.

Answer 1

The duration option of animate() can either be a string or a number expressed in milliseconds. Valid strings are "fast" and "slow", respectively representing 200 and 600 milliseconds.

In your case, lval["in-duration"] is a string, because it comes from a data- attribute, but is neither "fast" nor "slow", so it is invalid and therefore ignored.

You will have to convert it to a number, either with parseInt():

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

Or the unary + operator:

duration: +lval["in-duration"]