如果我有大量元素,可能看起来像:
<p class="test" data-left="250" data-bottom="55">Good morning.</p>
<p class="test" data-left="350" data-bottom="123">Good afternoon.</p>
<p class="test" data-left="290" data-bottom="300">Good night.</p>
......依此类推,我该如何为它们制作动画?我最初尝试过:
$('.test').animate({
left: $(this).attr('data-left'),
bottom: $(this).attr('data-bottom')
});
但似乎$(this)
上下文在这里不可用。有没有办法做到这一点?或者只是编写一个.each()
循环来实现它?
注意:我们使用的是旧版jQuery,因此使用了.attr()
答案 0 :(得分:2)
你必须迭代这些元素:
$('.test').each(function() {
var $this = $(this);
$this.animate({
left: +$this.attr('data-left'),
bottom: +$this.attr('data-bottom')
});
});
我认为您可能还必须将无单位字符串解析为数字。
答案 1 :(得分:0)
您需要使用.each()
$('.test').each(function(){
$(this).animate({
left:$(this).attr('data-left'),
bottom:$(this).attr('data-bottom')
})
});