问如何在使用jQuery显示元素时添加animate.css动画

EN

<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>

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

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

    });