Показать сообщение отдельно
  #1 (permalink)  
Старый 06.10.2011, 11:32
Интересующийся
Отправить личное сообщение для Manjuriano Посмотреть профиль Найти все сообщения от Manjuriano
 
Регистрация: 16.09.2011
Сообщений: 12

Контроль webkit анимации через jQuery (вопрос)
Есть кнопка и объект. Стоит задача сделать так чтобы при подводе на кнопку объект начал двигаться благодаря webkit анимации и остановился в конце своего движения. После убирания мышки с кнопки, объект нужно вернуть в первоначальное состояние с той же анимацией, только в обратном порядке.



Задача состоит именно в этом, я не могу использовать анимацию js. К тому же я не могу контролировать webkit анимацию на чистом css, так как у меня группа объектов которых нужно анимировать подводя мышку к определенным объектам, я просто упростил схему чтобы было проще.

При подводе мышки я задаю класс с анимацией объекту:
@-webkit-keyframes floatCenter{
	0%{	
	}
	100%{
	margin-top: -25px;
	-webkit-transform:rotateZ(-5deg);
	}
}

.box-inside-left-anim {
    -webkit-animation-name: floatCenter;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
	-webkit-animation-fill-mode: forwards;
}


При выводе мышки с кнопки я задаю объекту новый класс, в котором анимация крутится в обратном направлении:

@-webkit-keyframes floatCenterStop{
	0%{	
	margin-top: -25px;
	-webkit-transform:rotateZ(-5deg);
	}
	100%{
	margin-top: 0px;
	-webkit-transform:rotateZ(0deg);
	}
}

.box-inside-left-stop {
    -webkit-animation-name: floatCenterStop;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
	-webkit-animation-fill-mode: forwards;
}


И тут я застреваю, так как класс у объекта теперь .box-inside-left-stop то при повторном подводе мышкой он уже не реагирует и не анимируется. Потому что изначально класс был .box-inside-right, после подвода стал .box-inside-right-amin, а после увода мышки стал .box-inside-right-stop. И я не понимаю как мне вернуть его в первоначальное состояние. Подскажите пожалуйста, задача не сложная, просто из-за моего небольшого опыта я не могу придумать верного подхода.

Вот jQuery код:
<script type="text/javascript">
	$(document).ready(function(){
	$(".box-inside-main").mouseover(function(){
		$(".box-inside-right").addClass("box-inside-right-anim");
	});
	
	$(".box-inside-main").mouseout(function(){
		$(".box-inside-right-anim").addClass("box-inside-right-stop");
	});
});


Спасибо.

Последний раз редактировалось Manjuriano, 06.10.2011 в 11:39.
Ответить с цитированием