Q:

use data attribute in animate function

I want to use the data attribute value in the jquery animate function in order to set speed of the animation depending on the data attribute value.
html
<li class="layer" data-depth="2"><img src="imgs/logo/zaincorp logo.png"></li>
<li class="layer" data-depth="4"><img src="imgs/logo/creative hands logo.png"></li>
<li class="layer" data-depth="6"><img src="imgs/logo/la logo.png"></li>

jquery
function slide(){
    layer.animate({
        'left': '+='+data('depth')*20+'px'
    },100, 'linear',function(){
        slide();
    });
}
slide();

A:

You'll need to iterate the elements:
function slide() {
    var $this = $(this);
    $this.animate({
        'left': '+=' + $this.data('depth') * 20 + 'px'
    }, 100, 'linear', slide);
}

$('.layer').each(slide);

