Здравствуйте!
Не могу разобраться, как запустить анимацию при наведении курсора на объект, после того, как у этого же объекта проигралась другая анимация. Точнее запустить смог, но вторая анимация проигрывается заново, после того, как прокручивается немного страничка.
А мне нужно добиться того, чтобы при пролистывании страницы до зоны видимости этого объекта проигралась анимация (появление), а потом, при
наведении курсора на этот же объект проигрывалась другая анимация (вращение).
Если сможет кто нибудь помочь, буду крайне благодарен!
Я использую:
- jQuery
- animated.css
- viewport-Checker
CSS:
Код:
|
.zoom5 {
width: 150px;
height: 50px;
background-color: blue;
}
.hiddenx {
opacity: 0;
}
.visiblex {
opacity: 1;
} |
JS:
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
})
}
)
});