JS JSON保存了很多div的当前状态

Question

我正在进行模拟，其中很多div（.persons .otherobjects）在屏幕上移动，并带有.animate（）到随机位置。

我必须能够将模拟的当前状态保存在JSON数组中并加载此JSON数组，并且在加载时，元素应该从它们停止的位置继续动画。

var json = JSON.stringify($('.person'));

对字符串进行字符串化但是我得到了错误：

 Uncaught TypeError: Converting circular structure to JSON    

我盯着我的代码几个小时后就没有想法了。

此外，我不确定是否将它们放入数组并转换为JSON会使它们在重新加载时保持动画。

任何评论，想法，指示都将不胜感激。

Answer 1

你想要一个像这样的结构：

var json = {
  "div1" : { top: 212, left: 386 },
  "div2" : { top: 40,  left: 166 },
  "div3" : { top: 20,  left: 218 }
}

每个div都需要有自己的ID，否则，你怎么能识别它们并给它们回位呢？

以下是构建json的方法：

var json = {};

$('.person').each( function(){
   json[ $(this).attr('id') ] = $(this).position();
})

然后，这里是你如何在加载时恢复div的位置：

$.each( json, function( id, position ){
   $("#"+id).css({ 'top' : position.top , 'left' : position:left })
});

有意义吗？

然而，用动画方向和速度，轨迹等保存它们的确切状态似乎要困难得多。特别是如果动画是随机的......