为什么动画完成后我的元素不再隐藏

我要完成的是一个框网格，其中每个框在单击时都会动画化，然后显示覆盖整个网格的相应详细信息视图。

详细信息视图包含用于返回到网格视图的链接。

在我的完整实现中，将有从详细信息视图到详细信息视图的轮播样式导航，并带有动画。 因此，我想用一个简单的覆盖隐藏框的网格，一旦用户返回到网格视图，它应该恢复为隐藏。

问题是动画完成时 JQuery hide()调用似乎被删除了......有时，但并非总是如此。

创建了一个简单的 JSFiddle，显示了我试图避免的行为。 当您单击其中一个框时，下一个.expanded-card元素将正确显示。 当您单击"返回概览"时，.expanded-card元素会适当地淡出，并且.grid-background叠加层将被隐藏。

但是一旦zoomOut动画完成，.grid-background就会再次可见。 为什么？

该 HTML：

<div class="container">
        <div class="row grid-3x3-container">
            <div class="col-xs-10 col-xs-offset-1 text-center">
                <div class="container-fluid grid-3x3">
                    <div class="row">
                        <div class="col-xs-4 grid-item">
                            <div class="flip-box animated">
                                <h3>Title 1</h3>
                            </div>
                        </div>
                        <div class="expanded-card animated col-xs-12">
                            <div class="card-header">
                                <span class="card-nav-back"> back to overview</span>
                            </div>
                            <div class="card-body">
                              <p>
                                Text goes here!
                              </p>
                            </div>
                        </div>
                        <div class="col-xs-4 grid-item">
                            <div class="flip-box animated">
                                <h3>Title 2</h3>
                            </div>
                        </div>
                        <div class="expanded-card animated col-xs-10 col-xs-offset-1">
                            <div class="card-header ">
                                <span class="card-nav-back"> back to overview</span>
                            </div>
                            <div class="card-body">
                              <p>
                                Text goes here!
                              </p>
                            </div>
                        </div>
                        <div class="col-xs-4 grid-item">
                            <div class="flip-box animated">
                                <h3>Title 3</h3>
                            </div>
                        </div>
                        <div class="expanded-card animated col-xs-10 col-xs-offset-1">
                            <div class="card-header ">
                                <span class="card-nav-back"> back to overview</span>
                            </div>
                            <div class="card-body">
                              <p>
                                Text goes here!
                              </p>
                            </div>
                        </div>
                        <div class="col-xs-12 grid-background">
                        </div>
                      </div>
                  </div>
              </div>
          </div>
        </div>

JavaScript：

  $('.flip-box').on("click", function () {
        var currentCard = $(this).parent();
        currentCard.addClass('current-selection');
        var expandedCard = currentCard.next('.expanded-card');
        currentCard.addClass('flipOutX');
        currentCard.on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
          expandedCard.show();
          expandedCard.addClass('zoomIn');
          currentCard.find('h3').show();
          expandedCard.on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
            expandedCard.removeClass('zoomIn');
            $('.grid-background').show();
          });
        });
    });
    $('.expanded-card').on("click", '.card-header>.card-nav-back', function () {
        var currentGridItem = $('.current-selection');
        var currentCard = currentGridItem.next('.expanded-card');
        currentGridItem.removeClass('current-selection');
        currentCard.addClass('zoomOut');
        currentCard.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
          currentCard.removeClass('zoomOut');
          currentCard.hide();
        });
        $('.grid-background').hide();
    });