Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Анимация после анимации (https://javascript.ru/forum/dom-window/54834-animaciya-posle-animacii.html)

Narahon 02.04.2015 17:47

Анимация после анимации
 
Здравствуйте!
Не могу разобраться, как запустить анимацию при наведении курсора на объект, после того, как у этого же объекта проигралась другая анимация. Точнее запустить смог, но вторая анимация проигрывается заново, после того, как прокручивается немного страничка.
А мне нужно добиться того, чтобы при пролистывании страницы до зоны видимости этого объекта проигралась анимация (появление), а потом, при наведении курсора на этот же объект проигрывалась другая анимация (вращение).
Если сможет кто нибудь помочь, буду крайне благодарен! :)
Я использую:
  • 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
                })
            }
        )
});

рони 02.04.2015 17:55

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

Narahon 02.04.2015 18:09

Цитата:

Сообщение от рони (Сообщение 364639)
Narahon,
а зачем в hover нужен viewportChecker ?

Не нужен, это я пробуя всевозможные варианты, случайно скопировал сюда) :write:
Вот более логичное моё размышление:
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:

рони 02.04.2015 18:16

Цитата:

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

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

Narahon 02.04.2015 18:37

Цитата:

Сообщение от рони (Сообщение 364650)
была проблема с 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 я не сильно разбираюсь, в процессе изучения

рони 02.04.2015 18:52

Narahon,
может запятую забыли убрать в 5 строке
да и в hover обычно 2 функции

рони 02.04.2015 18:54

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 02.04.2015 19:04

Цитата:

Сообщение от рони (Сообщение 364659)
Narahon,
может так ?

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

рони 02.04.2015 19:14

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

Narahon 02.04.2015 19:18

Цитата:

Сообщение от рони (Сообщение 364666)
Narahon,
без макета нет совета

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


Часовой пояс GMT +3, время: 17:44.