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

Answer 2

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

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

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

}); 

這工作

Answer 3

如果你不你可以使用此想用邪惡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); 
    }); 
}); 

工作演示：http://jsfiddle.net/fewds/tZMmy/