Анимация после анимации

[Narahon]

Здравствуйте!
Не могу разобраться, как запустить анимацию при наведении курсора на объект, после того, как у этого же объекта проигралась другая анимация. Точнее запустить смог, но вторая анимация проигрывается заново, после того, как прокручивается немного страничка.
А мне нужно добиться того, чтобы при пролистывании страницы до зоны видимости этого объекта проигралась анимация (появление), а потом, при наведении курсора на этот же объект проигрывалась другая анимация (вращение).
Если сможет кто нибудь помочь, буду крайне благодарен!
Я использую:

• 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
                })
            }
        )
});

[рони]

Narahon,
а зачем в hover нужен viewportChecker ?

[Narahon]

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');
            }
        );
});

Но при таком варианте, при прокручивании страницы первая анимация вновь начинает работать

[рони]

Вот более логичное моё размышление

была проблема с 1 обьектом стало 10
попробуйте локализовать проблему и сделайте макет

[Narahon]

была проблема с 1 обьектом стало 10
попробуйте локализовать проблему и сделайте макет

Прошу прощения, добавил весь список, мне для одного объекта нужно из списка, а именно:

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');
            }
        );
});

[Narahon]

Narahon,
может так ?

О, спасибо, теперь правильно удаляются классы. Но так же остаётся проблема с тем, что после наведения курсора на объект и последующем скроллинге первая анимация срабатывает, чего не должно быть, как от этого можно избавится?
Или 2 анимации не уживутся друг с другом?

[рони]

Narahon,
без макета нет совета

[Narahon]

Narahon,
без макета нет совета

Макет завтра набросаю, а ссылку на сайт, на котором это всё делается скинул в ЛС