Переключение анимации при использовании Animate.css

Question

Переключение анимации при использовании Animate.css

0

В настоящее время я пытаюсь создать панель, которую я сделал для анимации на экране. т.е. когда я нажимаю на кнопку, она анимируется на экране, и когда я снова нажимаю ту же кнопку, она оживляется на экране. Но что происходит, панель на загрузке страницы находится на экране. Когда я нажимаю кнопку, она анимирует мелкий экран, и когда я снова нажимаю на кнопку, она никогда не оживляется на экране. Я не уверен, что я делаю неправильно... Вот мой код:

 $(document).on('pageinit','#sellbookpage',
        function()
        {   
            flagclass = true;
            //button that gets clicked
            $('#SignUpLink').click(function() 
            {
                if(flagclass)
                {
                    $('#signinput').addClass("animated  fadeOutDownBig");
                    flagclass = false;
                }
                else
                {
                    $('#signinput').addClass("animated  fadeOutUpBig");
                    flagclass = true;
                }

            }););

В основном функциональность, которую я ищу, заключается в том, чтобы панель отображалась на экране и выводилась из экрана, когда я нажимаю кнопку.

user481610 12 нояб. 2013, в 12:38

Источник

0

сделайте jsfiddle для этого кода и опубликуйте ссылку на скрипку. Это поможет легко найти проблему
Sindhu 12 нояб. 2013, в 11:30
0

Прежде всего используйте функцию animate для переключения fadeIn fadeOut jsfiddle.net
arclite 12 нояб. 2013, в 12:18

Теги:

javascript

jquery

animation

2 ответа

0

У меня была такая же точная проблема. Я нашел эту статью в блоге, которая разбивает ее, и как ее решить.

Вы используете функцию jQuery one() для обнаружения конца анимации css3. Затем вы удалите любые классы animated.css, такие как анимация и т.д....

http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end

Таким образом, ваш код будет выглядеть так

$('#signinput').addClass("animated  fadeOutDownBig")
    .one('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
        function(e) {
            $(this).removeClass('animated fadeOutDownBig');
        }
    );

yeowoh 26 март 2014, в 21:18

Ещё вопросы

сделайте jsfiddle для этого кода и опубликуйте ссылку на скрипку. Это поможет легко найти проблему
Прежде всего используйте функцию animate для переключения fadeIn fadeOut jsfiddle.net

arclite · Accepted Answer · 2013-11-12T09-39-00.000Z

Попробуйте что-то вроде этого

$(document).ready(function(){
    $('#sellbookpage').click(function(e){
        e.preventDefault();
        var test = $('#signinput');
        if(test.hasClass('showed')) {
            test.removeClass('showed').fadeOut();
        }else{
            test.addClass('showed').fadeIn();
        }
    })
})

и добавьте в класс ввода, если он отображается при загрузке страницы :)

http://jsfiddle.net/futkB/