如何添加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);
  });
 });

控制#navigation-panel隐藏和显示的javascript代码如下:

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

其中h变量为视口高度。

面板正常出现和消失，但不显示任何动画。我哪里错了?

非常感谢!

Answer 1

尝试在同一行中使用removeClass:$(" #导航面板").removeClass () .addClass(……