开发者

jQuery animating back to original position

开发者 https://www.devze.com 2023-01-18 11:02 出处:网络
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 the

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 origin开发者_StackOverflow中文版al.

Thanks in Advance.

PVS


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

精彩评论

暂无评论...
验证码 换一张
取 消