在类似手风琴的选项卡上完成另一个运行功能

Question

我正在尝试做类似手风琴效果的事情。当您单击“选项卡”时，它应该关闭已经打开的选项卡，然后打开被单击的选项卡。 但是发生的事情是它首先打开点击的那个，然后关闭已经打开的那个。

你可以在这里看到它： https://boguz.github.io/SWCanonTimeline/

我正在使用以下 jQuery：

// DOCUMENT READY FUNCTION
$(document).ready(function () {

// CLICK ON STRIPE
$(".stripe").on("click", function() {

    closeStripe();

    openStripe( $(this) );

});

}); // end of document.ready


// CLOSE OPEN STRIPE
function closeStripe() {

    $(".open").removeClass("open");

}

// OPEN CLICKED STRIPE
function openStripe(stripe) {

    stripe.addClass("open");

}

我曾尝试使用$.when().done()，但未能成功。我也尝试将其设为回调函数，但没有成功。

Answer 1

您的问题不在于 JavaScript。您同时触发两个动画，因此它们应该同时发生（并且确实如此）。但它们是 CSS 过渡，它们适用于 max-height。 This question 其实很相似。

发生的情况是，您将 max-height 从 1000px 转换为 100px，但您的元素只有大约 700px 高，因此您不会看到第一个 300px 的任何内容。

您可以做的是等待closeStripe() 动画完成使用setTimeout()：

$(".stripe").on("click", function() {
    closeStripe();
    var duration = Number($(this).css('transition-duration').match(/\d+(\.\d+)?/)[0])*1000;
    setTimeout(function () {
        openStripe($(this));
    }, duration);
});

这会从transition-duration 属性中获取持续时间并将其转换为字符串（未经过充分测试）。

Answer 2

观察到的延迟是由于max-height 属性的转换。打开的手风琴的最大高度设置为 1000 像素，而关闭的手风琴设置为 100 像素。这意味着浏览器将执行从 100px 到 1000px 的转换。当您打开的手风琴的实际内容高度不是 1000px 时，过渡将延迟，因为浏览器只是将值从 1000px 向下补间，并且只有在补间值达到或小于该值时，内容才会崩溃max-height.

另一种解决方案是基于 JS 的解决方案，您可以使用 .slideUp(500) 和 .slideDown(500) 而不是 CSS 过渡。这些 jQuery 函数将考虑手风琴的实际高度，而不是补间 max-height 属性。

$(document).ready(function () {
  $(".stripe").on("click", function() {
    closeStripe();
    openStripe($(this));
  });
});

// CLOSE OPEN STRIPE
function closeStripe() {
  $(".stripe").removeClass("open").find("div.content").slideUp(500);
}
// OPEN CLICKED STRIPE
function openStripe(stripe) {
  stripe.addClass("open").find("div.content").slideDown(500);
}

* {
  margin: 0;
  padding: 0;
  font-family: "Ubuntu";
}
body, html { width: 100vw; }
section.head {
  width: 100vw;
  height: 80px;
  background-color: #f4f2f2;
}
.menu {
  height: 80px;
  width: 260px;
  float: left;
}
h1.title {
  width: calc( 100vw - 520px );
  height: 80px;
  float: left;
  text-align: center;
  line-height: 80px;
  text-transform: uppercase;
  font-weight: 300;
  color: #666;
}
.social {
  width: 260px;
  height: 80px;
  float: right;
}
.stripe {
  width: 100vw;
  text-align: center;
  border: 10px solid transparent;
  cursor: pointer;
  overflow: hidden;
}
.stripe[data-eventType="book"] { background-color: #F4D03F; }
.stripe[data-eventType="comic"] { background-color: #E67E22; }
.stripe[data-eventType="movie"] { background-color: #D64541; }
.stripe[data-eventType="tv"] { background-color: #C0392B; }
.stripe[data-eventType="game"] { background-color: #674172; }
.stripe:hover { border-color: #f4f2f2; }
.stripe.open:hover { border-color: transparent; }
.stripeTitle {
  font-size: 4em;
  color: white;
  line-height: 160px;
  text-transform: uppercase;
}
.content {
  width: calc( 100vw - 100px );
  background-color: #f4f2f2;
  margin: 0 auto;
  overflow: hidden;
  padding: 50px;
  display: none;
  box-sizing: border-box;
}
.content p {
  color: #666;
  font-weight: 300;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="head">
  <div class="menu"></div>
  <h1 class="title">Star Wars Canon Timeline</h1>
  <div class="social"></div>
</section>
<!-- end section.head -->
<section class="main">
  <div class="stripe" data-eventtype="movie">
    <h2 class="stripeTitle">32 bby</h2>
    <div class="content">
      <p>HERE WILL COME THE CONTENT</p>
    </div>
    <!-- end .content -->
  </div>
  <!-- end stripe -->
  <div class="stripe open" data-eventtype="comic">
    <h2 class="stripeTitle">29 bby</h2>
    <div class="content">
      <p>HERE WILL COME THE CONTENT</p>
    </div>
    <!-- end .content -->
  </div>
  <!-- end stripe -->
  <div class="stripe" data-eventtype="movie">
    <h2 class="stripeTitle">22 bby</h2>
    <div class="content">
      <p>HERE WILL COME THE CONTENT</p>
    </div>
    <!-- end .content -->
  </div>
  <!-- end stripe -->
  <div class="stripe" data-eventtype="movie">
    <h2 class="stripeTitle">22 bby</h2>
    <div class="content">
      <p>HERE WILL COME THE CONTENT</p>
    </div>
    <!-- end .content -->
  </div>
  <!-- end stripe -->
  <div class="stripe" data-eventtype="tv">
    <h2 class="stripeTitle">22 - 20 bby</h2>
    <div class="content">
      <p>HERE WILL COME THE CONTENT</p>
    </div>
    <!-- end .content -->
  </div>
  <!-- end stripe -->
  <div class="stripe" data-eventtype="comic">
    <h2 class="stripeTitle">20 bby</h2>
    <div class="content">
      <p>HERE WILL COME THE CONTENT</p>
    </div>
    <!-- end .content -->
  </div>
  <!-- end stripe -->
</section>
<!-- end section.main -->

Answer 3

我最终听从了 Terry 的建议，并使用了 jQuery 中的 toggleSlide 函数来为标签设置动画。

这是我现在使用的代码：

// DOCUMENT READY FUNCTION
$(document).ready(function () {

    // on tab click
    $(".stripe").on("click", function() {

        // close all open tabs
        $(this).siblings().children(".content").slideUp();

        // open just clicked tab
        $(this).children(".content").slideToggle();

    });

}); // end of document.ready