CODEWITHSUNDEEP
jqueryhtml
Abel D
Abel D

Reputation: 1080

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();

Upvotes: 0

Views: 546

Answers (1)

Jason P
Jason P

Reputation: 27012

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);

Upvotes: 1

Related Questions