jQuery动画回到原始位置

Posted 2023-05-08

【中文标题】jQuery动画回到原始位置

【英文标题】：jQuery animating back to original position

【发布时间】：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

【参考方案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()，然后在稍后制作动画时使用它。