jQuery 动画回到原始位置

Question

我正在开发一个网站，其中有一些绝对定位的 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

Answer 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()在绑定(bind)之前为每个元素的父元素设置，然后在稍后动画返回时使用它。