Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.10.2011, 10: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 в 10:39.
Ответить с цитированием
  #2 (permalink)  
Старый 08.10.2011, 00:28
Интересующийся
Отправить личное сообщение для vpisklov Посмотреть профиль Найти все сообщения от vpisklov
 
Регистрация: 04.10.2010
Сообщений: 18

webkit анимация - это критично? можно попробовать реализовать это через спрайты... тогда эта анимация будет кроссбраузерной...
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Асинхронная отправка файла через jQuery InviS jQuery 3 23.04.2013 21:27
вопрос про возможности JS для рисования и анимации macdack Библиотеки/Тулкиты/Фреймворки 3 14.07.2011 23:13
jQuery, jsTree - обновление дерева через ajax extremum.func jQuery 2 09.11.2009 13:48
Вопрос про $ в jquery vvsh Общие вопросы Javascript 6 06.09.2009 17:50
подгрузка файлов через jQuery imdogma jQuery 4 05.05.2009 20:46