JQuery анимация обратно в исходное положение - PullRequest
Новая
       32

JQuery анимация обратно в исходное положение

5 голосов
/ 04 октября 2010

У меня есть сайт, над которым я работаю, который имеет несколько абсолютных позиционированных 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 Ответ

12 голосов
/ 04 октября 2010

Вы можете сохранить позицию при первой загрузке страницы с помощью $.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() для родителя каждого элемента непосредственно перед привязкой, а затем использует его при последующей анимации.

...