使用从对象数组创建的方向设置JQuery.animate（），但

我想使用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 $div = $(this);
    var animation = eval($div.attr('data-animation'));
    $.each(animation, function(i) {
        $div.animate(animation[i], 1000);
    });
});

---

此功能有效

如果您不想使用evil

eval

功能，可以使用此功能：

$('div').each(function () {
    var $div = $(this);
    var data = $div.data('animation').replace(/[[\]]/g,'');
    var dataArray = data.split(',');
    var animations = {};

    for (var i = 0; i < dataArray.length; i++) {
        var trimBrackets = dataArray[i].replace(/[{\}]/g,'');
        var keyValues = trimBrackets.split(':');
        var key = keyValues[0].replace(/\'/g, '');
        var value = parseInt(keyValues[1], 10);

        animations[i] = {};
        animations[i][key] = value;
    }

    $.each(animations, function (i, v) {
        $div.animate(v, 1000);
    });
});

$（'div'）。每个（函数（）{
var$div=$（本）；
变量数据=$div.data（'animation'）。替换（/[\]]/g'）；
var dataArray=data.split（'，'）；
var={}；
对于（var i=0；i

---

工作演示：

我看不出你的问题。我换了你的小提琴，它开始工作了。奇怪的考虑到属性的值是字符串而不是数组，它以前不起作用。但是谢谢你@Felipe Fonseca。

$('div').each(function() {

    var animation = eval($(this).attr('data-animation')),
        $animatedbox = $(this);

    $.each(animation, function(i) {
        $animatedbox.animate(animation[i], 1000);
    });

});

$('div').each(function () {
    var $div = $(this);
    var data = $div.data('animation').replace(/[[\]]/g,'');
    var dataArray = data.split(',');
    var animations = {};

    for (var i = 0; i < dataArray.length; i++) {
        var trimBrackets = dataArray[i].replace(/[{\}]/g,'');
        var keyValues = trimBrackets.split(':');
        var key = keyValues[0].replace(/\'/g, '');
        var value = parseInt(keyValues[1], 10);

        animations[i] = {};
        animations[i][key] = value;
    }

    $.each(animations, function (i, v) {
        $div.animate(v, 1000);
    });
});