Анимация после анимации
Здравствуйте!
Не могу разобраться, как запустить анимацию при наведении курсора на объект, после того, как у этого же объекта проигралась другая анимация. Точнее запустить смог, но вторая анимация проигрывается заново, после того, как прокручивается немного страничка. А мне нужно добиться того, чтобы при пролистывании страницы до зоны видимости этого объекта проигралась анимация (появление), а потом, при наведении курсора на этот же объект проигрывалась другая анимация (вращение). Если сможет кто нибудь помочь, буду крайне благодарен! :) Я использую:
Код:
.zoom5 { jQuery(document).ready(function($) { $('.zoom5').addClass('hiddenx').viewportChecker({ classToAdd: 'visiblex animated zoomInRight', offset: 100, repeat: false, }) $('.zoom5').hover( function(){ $(this).viewportChecker({ classToRemove: 'zoomInRight', classToAdd: 'rotateIn', repeat: true }) } ) }); |
Narahon,
а зачем в hover нужен viewportChecker ? |
Цитата:
Вот более логичное моё размышление: jQuery(document).ready(function($) { $('.bottom1').addClass('hiddenx').viewportChecker({ classToAdd: 'visiblex animated bounceInLeft', offset: 100, repeat: true }); $('.bottom2').addClass('hiddenx').viewportChecker({ classToAdd: 'visiblex animated zoomIn', offset: 100, repeat: true }); $('.bottom3').addClass('hiddenx').viewportChecker({ classToAdd: 'visiblex animated zoomIn', offset: 100, repeat: true }); $('.bottom4').addClass('hiddenx').viewportChecker({ classToAdd: 'visiblex animated bounceInRight', offset: 100, repeat: true }); $('.jshop_categ').addClass('hiddenx').viewportChecker({ classToAdd: 'visiblex animated fadeInRight', offset: 100, repeat: true }); $('.zoom1').addClass('hiddenx').viewportChecker({ classToAdd: 'visiblex animated zoomInLeft', offset: 100, repeat: true }); $('.zoom2').addClass('hiddenx').viewportChecker({ classToAdd: 'visiblex animated zoomInLeft', offset: 100, repeat: true }); $('.zoom3').addClass('hiddenx').viewportChecker({ classToAdd: 'visiblex animated zoomIn', offset: 100, repeat: true }); $('.zoom4').addClass('hiddenx').viewportChecker({ classToAdd: 'visiblex animated zoomInRight', offset: 100, repeat: true }); $('.zoom5').addClass('hiddenx').viewportChecker({ classToAdd: 'visiblex animated zoomInRight', offset: 100, repeat: false }); $('.zoom5').hover( function(){ $(this).removeClass('zoomInRight'); }, function(){ $(this).addClass('rotateIn'); }, function(){ $(this).removeClass('rotateIn'); } ); }); Но при таком варианте, при прокручивании страницы первая анимация вновь начинает работать :help: |
Цитата:
попробуйте локализовать проблему и сделайте макет |
Цитата:
jQuery(document).ready(function($) { $('.zoom5').addClass('hiddenx').viewportChecker({ classToAdd: 'visiblex animated zoomInRight', offset: 100, repeat: false, }) $('.zoom5').hover( function(){ $(this).removeClass('zoomInRight'); }, function(){ $(this).addClass('rotateIn'); }, function(){ $(this).removeClass('rotateIn'); } ); }); И всё, на этом я встрял, что дальше делать я не знаю Анимация проявления проходит как задумано и по идее не должна больше повторяться, но... При наведении мышки естественно стиль 'zoomInRight' удаляется и как раз таки viewportChecker заново активирует этот стиль, из-за чего происходит зацикливание первой анимации, да и вообще белиберда какая-то))) Но как это починить, додуматься не могу. К сожалению, в js я не сильно разбираюсь, в процессе изучения |
Narahon,
может запятую забыли убрать в 5 строке да и в hover обычно 2 функции |
Narahon,
может так ? jQuery(document).ready(function($) { $('.zoom5').addClass('hiddenx').viewportChecker({ classToAdd: 'visiblex animated zoomInRight', offset: 100, repeat: false }) $('.zoom5').hover( function(){ $(this).removeClass('zoomInRight'); $(this).addClass('rotateIn'); }, function(){ $(this).removeClass('rotateIn'); } ); }); |
Цитата:
Или 2 анимации не уживутся друг с другом? |
Narahon,
без макета нет совета |
Цитата:
|
Часовой пояс GMT +3, время: 17:44. |