Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.04.2015, 17:47
Новичок на форуме
Отправить личное сообщение для Narahon Посмотреть профиль Найти все сообщения от Narahon
 
Регистрация: 16.02.2013
Сообщений: 8

Анимация после анимации
Здравствуйте!
Не могу разобраться, как запустить анимацию при наведении курсора на объект, после того, как у этого же объекта проигралась другая анимация. Точнее запустить смог, но вторая анимация проигрывается заново, после того, как прокручивается немного страничка.
А мне нужно добиться того, чтобы при пролистывании страницы до зоны видимости этого объекта проигралась анимация (появление), а потом, при наведении курсора на этот же объект проигрывалась другая анимация (вращение).
Если сможет кто нибудь помочь, буду крайне благодарен!
Я использую:
  • 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
                })
            }
        )
});
Ответить с цитированием
  #2 (permalink)  
Старый 02.04.2015, 17:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,054

Narahon,
а зачем в hover нужен viewportChecker ?
Ответить с цитированием
  #3 (permalink)  
Старый 02.04.2015, 18:09
Новичок на форуме
Отправить личное сообщение для Narahon Посмотреть профиль Найти все сообщения от Narahon
 
Регистрация: 16.02.2013
Сообщений: 8

Сообщение от рони Посмотреть сообщение
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');
            }
        );
});


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

Последний раз редактировалось Narahon, 02.04.2015 в 18:11.
Ответить с цитированием
  #4 (permalink)  
Старый 02.04.2015, 18:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,054

Сообщение от Narahon
Вот более логичное моё размышление
была проблема с 1 обьектом стало 10
попробуйте локализовать проблему и сделайте макет
Ответить с цитированием
  #5 (permalink)  
Старый 02.04.2015, 18:37
Новичок на форуме
Отправить личное сообщение для Narahon Посмотреть профиль Найти все сообщения от Narahon
 
Регистрация: 16.02.2013
Сообщений: 8

Сообщение от рони Посмотреть сообщение
была проблема с 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 я не сильно разбираюсь, в процессе изучения
Ответить с цитированием
  #6 (permalink)  
Старый 02.04.2015, 18:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,054

Narahon,
может запятую забыли убрать в 5 строке
да и в hover обычно 2 функции
Ответить с цитированием
  #7 (permalink)  
Старый 02.04.2015, 18:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,054

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');
            }
        );
});
Ответить с цитированием
  #8 (permalink)  
Старый 02.04.2015, 19:04
Новичок на форуме
Отправить личное сообщение для Narahon Посмотреть профиль Найти все сообщения от Narahon
 
Регистрация: 16.02.2013
Сообщений: 8

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

Последний раз редактировалось Narahon, 02.04.2015 в 19:14.
Ответить с цитированием
  #9 (permalink)  
Старый 02.04.2015, 19:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,054

Narahon,
без макета нет совета
Ответить с цитированием
  #10 (permalink)  
Старый 02.04.2015, 19:18
Новичок на форуме
Отправить личное сообщение для Narahon Посмотреть профиль Найти все сообщения от Narahon
 
Регистрация: 16.02.2013
Сообщений: 8

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
CSS анимация после :target gJam (X)HTML/CSS 0 01.08.2013 21:42
Возврат значения функции после завершения анимации (затухания) grego jQuery 5 16.04.2013 21:25
jquery анимация и редирект после SunYang Events/DOM/Window 5 17.05.2012 11:10
Выполнить функцию после окончания всей анимации De-Luxis jQuery 2 24.11.2011 15:11
После анимации очистить очередь virtus jQuery 2 19.12.2009 10:35