我想使用.animate()
具有从数组创建的方向的 JQuery 创建一个连续的动画效果。到目前为止,这是我成功的做法:
var animation = [{"top":80},{"left":130},{"top":200},{"left":0},{"top":0}];
$.each(animation, function(i) {
$('div').animate(animation[i], 1000);
});
但是,我想将数组保存在每个元素属性中,如下所示:
<div data-animation='[{"top":80},{"left":130},{"top":200},{"left":0},{"top":0}]'></div>
<div data-animation='[{"top":50},{"left":-30},{"top":100},{"left":80},{"top":75}]'></div>
<div data-animation='[{"top":10},{"left":-30},{"top":100}]'></div>
...所以我希望我可以为不同方向的多个元素制作动画。但我不知道如何将属性值转换为对象数组(我希望我可以在没有插件的情况下做到这一点):
$('div').each(function() {
var animation = $(this).data('animation'), // How to convert this into an array?
$animatedbox = $(this);
$.each(animation, function(i) {
$animatedbox.animate(animation[i], 1000);
});
});
这是一个演示:http: //jsfiddle.net/wthLR/