Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.01.2013, 23:56
Аспирант
Отправить личное сообщение для FoxTrix Посмотреть профиль Найти все сообщения от FoxTrix
 
Регистрация: 27.07.2012
Сообщений: 73

jQuery.transit
Здравствуйте!
Сегодня открыл для себя transition, начал делать анимацию 3d поворота, картинка за картинкой, на 180 градусов.
Если делать так
$("#button").click(function() {
	$("#container").transition({perspective: '600px', rotateY: '180deg'}, 500);
	$("#container2").transition({perspective: '600px', rotateY: '180deg'}, 500);
	setTimeout(function(){$("#container2").css("z-index", "2");}, 150);
});
то блоки движутся синхронно, но задняя картинка инвертируется(как и ожидалось), чтобы это исправить написал так
window.onload = function() {$("#container2").transition({perspective: '600px', rotateY: '180deg'}, 0);}
$("#button").click(function() {
	$("#container").transition({perspective: '600px', rotateY: '180deg'}, 500);
	$("#container2").transition({perspective: '600px', rotateY: '360deg'}, 500);
	setTimeout(function(){$("#container2").css("z-index", "2");}, 150);
});
но теперь появилась рассинхронизация в движении =(
как это можно исправить?

прикрепил архив(html файл + jquery 1.8.3 + jquery.transit)
Вложения:
Тип файла: zip transit.zip (39.9 Кб, 5 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 07.01.2013, 05:56
Аспирант
Отправить личное сообщение для FoxTrix Посмотреть профиль Найти все сообщения от FoxTrix
 
Регистрация: 27.07.2012
Сообщений: 73

решил проблему, нужно было дописать
-webkit-perspective: 600px;
в CSS родительского элемента, и поставить perspective: '0px' в
window.onload = function() {$("#container2").transition({perspective: '600px', rotateY: '180deg'}, 0);}
$("#button").click(function() {
	$("#container").transition({perspective: '0px', rotateY: '180deg'}, 500);
	$("#container2").transition({perspective: '0px', rotateY: '360deg'}, 500);
	setTimeout(function(){$("#container2").css("z-index", "3");}, 150);
});
видимо косяк плагина)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск