记住动画在页面中的位置

Question

我在页面中有一些带有动画的div，这些div在页面之间被重用。当div导航到另一个页面时如何记住div的位置，并在新页面上恢复该位置。

我尝试获取并设置jQuery .offset（），但这无法正确还原div位置。

var elementClasses = [
    'baloon',
    'cloud-1',
    'cloud-2',
    'cloud-3',
    'sun-quote-page-wrapper'
];

function saveElementOffsets() {
    if (! parseInt($('#is-desktop').val())) {
        return false;
    }

    $.each(elementClasses, function (key, value) {
        var offset = $('.' + value).offset();

        if (! offset) {
            return true;
        }
        console.log(value, offset);
        localStorage.setItem(value, JSON.stringify(offset));
    });
}

function applyElementOffsets() {
    if (! parseInt($('#is-desktop').val())) {
        return false;
    }

    $.each(elementClasses, function (key, value) {
        var offset = localStorage.getItem(value);

        if (! offset) {
            return true;
        }
        console.log(value, JSON.parse(offset));
        $('.' + value).offset(JSON.parse(offset));
    });
}

有什么想法吗？ ：）

Answer 1

您无需使用.offset()来设置顶部和左侧css属性以使其就位，而无需使用.css()来设置位置。

该代码段无法正常运行，因为我无法在其中使用localStorage。

var elementClasses = [
    'baloon',
    'cloud-1',
    'cloud-2',
    'cloud-3',
    'sun-quote-page-wrapper'
];

function saveElementOffsets() {
    if (! parseInt($('#is-desktop').val())) {
        return false;
    }

    $.each(elementClasses, function (key, value) {
        var offset = $('.' + value).offset();

        if (! offset) {
            return true;
        }
        console.log(value, offset);
        localStorage.setItem(value, JSON.stringify(offset));
    });
}

function applyElementOffsets() {
    if (! parseInt($('#is-desktop').val())) {
        return false;
    }

    $.each(elementClasses, function (key, value) {
        var offset = localStorage.getItem(value);

        if (! offset) {
            return true;
        }
        console.log(value, JSON.parse(offset));
        $('.' + value).css(JSON.parse(offset));
    });
}

function randomizePosition() {
  $.each(elementClasses, function (key, value) {
      $('.' + value).css({
        top: Math.random() * 500 + "px",
        left: Math.random() * 500 + "px"
      });
  });
}

div {
  height: 10px;
  width: 10px;
  position: absolute;
  background: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="is-desktop" value="1" type="hidden" />
<div class="baloon"></div>
<div class="cloud-1"></div>
<div class="cloud-2"></div>
<div class="cloud-3"></div>
<div class="sun-quote-page-wrapper"></div>