在动画函数中使用数据属性

Question

我想在jquery animate函数中使用data属性值，以便根据数据属性值设置动画的速度。

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

Answer 1

您需要迭代元素：

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

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