У меня есть два содержания, которые обмениваются своими позициями (зеленый и красный для примера).
Вначале зеленое содержимое смещается от 150 пикселей слева. Но после полного перехода этот контент восстанавливается слева направо на 0px. Как заставить это содержимое вернуться на 150 пикселей слева после полного хода?
Нажмите "кнопку изображения" в верхнем правом углу, чтобы увидеть: http://jsfiddle.net/Xroad/CnSEa/7/
$('#content-clients').css('left', '150%');
$('#btn-clients').click(function () {
$("#main ul:first").animate({
left: '-150%'
}, 500, function () {
$(this).css('left', '150%');
$(this).appendTo('#main');
});
$('#main ul:first').next().animate({
left: '0'
}, 500);
});
Я НАШЕЛ ! http://jsfiddle.net/Xroad/CnSEa/19/
Я думаю, вы слишком задумываетесь об этом. Просто используйте toggleClass()
чтобы добавить и удалить новый класс с другой left
позицией. Затем, когда вы удаляете класс, он будет использовать исходную left
позицию, которую вы установили. Взгляните на эту скрипку, вы увидите, что зеленый квадрат возвращается в исходное left:150px
после удаления добавленного класса, а красное поле использует его left:0
.
Вы просите проблему смешивания px и% в ваших анимациях. Лучше быть последовательным. Например, замените -150% на 0 - $(this).width()
, замените 150% на $('#main').width() + $('#main').offset().left
0 - $(this).width()
.