2010-10-04 2 views
5

У меня есть сайт, на котором я работаю, у него есть несколько абсолютных позиционированных div, которые мне нужно изменить при нажатии, они затем заполнят контейнер, в котором находятся div. как мне заставить их переключаться, чтобы вернуться в исходное положение (вверху, слева), которое отличается для каждого.jQuery анимация назад в исходное положение

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

ответ

12

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

+0

Спасибо, Ник! Работает. –

Смежные вопросы