jQuery 动画回到原始位置

发布于 2024-09-25 20:14:28 字数 561 浏览 3 评论 0原文

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

原文

I've got a site i'm working on that has a few absolutelty positioned divs that I need to resize on clicking, these will then fill the container that the divs are in. The question is how do I get them on toggle to go back to the original position (top, left) which is different for each.

$(".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);
    });

Tried the above but it's getting the new position not the original.

Thanks in Advance.

PVS

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

潦草背影 2024-10-02 20:14:28

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

$(".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()< /a> 在绑定之前为每个元素的父元素，然后在稍后动画返回时使用它。

You can store the position when the page first loads using $.data() and use it later, like this:

$(".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);
});

This stores the .position() for each element's parent just before you bind, then uses that when animating back later.

回复收藏 0 原文

~没有更多了~