Как добавить анимацию animate.css, когда элемент отображается с помощью jQuery

Question

Я использую Initializr с Bootstrap3 для разработки веб-сайта. Я закодировал панель, которая отображается, когда пользователь выходит за пределы определенного предела. Html код панели:

<div id="navigation-panel"> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-10"></div> 
     <div class="col-xs-2 pull-right"> 
     <i class="fa fa-chevron-circle-up yellow"></i> 
     </div> 
    </div> 
    </div> 
</div> 

в то время как код CSS является:

#navigation-panel{ 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 6%; 
 
    background-color: #545454; 
 
    z-index:15; 
 
    border-top: 3px solid; 
 
    animation-duration: 5s; 
 
    animation-name: changeBorderBottomColor; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: alternate; 
 
} 
 
#navigation-panel i{ 
 
    font-size: 1.6em; 
 
    margin-top: 1%; 
 
}

Я использовал этот фрагмент кода:

(function ($) { 
    $.each(['show', 'hide'], function (i, ev) { 
    var el = $.fn[ev]; 
    $.fn[ev] = function() { 
     this.trigger(ev); 
     return el.apply(this, arguments); 
    }; 
    }); 
})(jQuery); 

и присоединить обработчик событий таким образом, :

$('#navigation-panel').on("show", function() { 
    $('#navigation-panel').removeClass(); 
    var animationName = 'animated bounceIn'; 
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; 
    $('#navigation-panel').addClass(animationName).one(animationEnd,function(){ 
    $(this).removeClass(animationName); 
    }); 
}); 

$('#navigation-panel').on("hide", function() { 
    $('#navigation-panel').removeClass(); 
    var animationName = 'animated bounceOut'; 
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; 
    $('#navigation-panel').addClass(animationName).one(animationEnd,function(){ 
    $(this).removeClass(animationName); 
    }); 
}); 

Javascript код, который управления # навигации панели Скрытие и отображение является следующее:

$(window).scroll(function (event) { 
    var scroll = $(window).scrollTop(); 
     console.log(scroll); 
     if(scroll >= (h - 100)) 
     { 
      $('#navigation-panel').show(); 
     } 
      else 
     { 
      $('#navigation-panel').hide(); 
     } 

    }); 

где переменная Н высота окна просмотра.

Панель появляется и исчезает правильно, но не отображается анимация. Где я ошибаюсь?

Большое спасибо!

Answer 1

Попробуйте с removeClass в той же строке:... $ ('# навигационной панели') removeClass() addClass (...... Или попробуйте без переменной