jQuery动画回到原始位置答案

【问题标题】：jQuery animating back to original positionjQuery动画回到原始位置
【发布时间】：2011-04-20 18:31:21
【问题描述】：

我正在开发一个网站，其中有一些绝对定位的 div，我需要在点击时调整它们的大小，然后这些 div 将填充到 div 所在的容器中。问题是我如何让它们打开切换以返回到每个不同的原始位置（顶部、左侧）。

$(".work-item .toggle").toggle(function() {
        $(this).parent().animate({ height: '430', width: '930', top: '0', left: '0' }, 750);
    },
    function() {
        var pos         = $(this).parent();
        var position    = pos.position();      

        $(this).parent().animate({ height: '150', width: '200', top: position.top, left: position.left }, 750);
    });

尝试了上述方法，但它得到的是新位置而不是原来的位置。

提前致谢。

PVS

【问题讨论】：

标签： jquery position jquery-animate

【解决方案1】：

您可以使用$.data() 存储页面首次加载时的位置，并在以后使用它，如下所示：

$(".work-item .toggle").each(function() {
  $.data(this, 'position', $(this).parent().position());
}).toggle(function() {
  $(this).parent().animate({ height: '430', width: '930', top: '0', left: '0' }, 750);
}, function() {
  var position = $.data(this, 'position');
  $(this).parent().animate({ height: '150', width: '200', top: position.top, left: position.left }, 750);
});

这会在您绑定之前为每个元素的父元素存储 .position()，然后在稍后制作动画时使用它。

【讨论】：