JQuery .animate() 具有从对象数组创建的方向，但是

Question

我想使用 JQuery .animate() 以及从数组创建的方向来创建连续的动画效果。这是我到目前为止成功做到的:

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/

Answer 1

试试这个:

$('div').each(function(){
    var $div = $(this);
    var animation = eval($div.attr('data-animation'));
    $.each(animation, function(i) {
        $div.animate(animation[i], 1000);
    });
});

JSFiddle example