避免在单击按钮时滑动内容的动画

Question

我在slideToggle中有以下简单的jQuery，也可以在JSFiddle here中找到：

$(document).ready(function() {
  $(".panel_button").on('click', function() {
    $(".panel").slideUp();
    var targetPanel = $(this).attr('data-target');
    $(targetPanel).slideToggle(0);
    $(this).toggleClass('active');
  });
});

body {
  height: 500px;
}

.contents {
  width: 100%;
  height: 20%;
}

.buttons {
  background-color: green;
  float: left;
  width: 100%;
}

.panel_button {
  float: left;
  width: 30%;
}

#panel1, #panel2, #panel3 {
  background-color: blue;
  float: left;
  width: 100%;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contents">

  <div id="panel1" class="panel">
    <div class="content_01a">Here goes content1a</div>
    <div class="content_01b">Here goes content1b</div>
  </div>

  <div id="panel2" class="panel">
    <div class="content_02a">Here goes content2a</div>
    <div class="content_02b">Here goes content2b</div>
    <div class="content_02c">Here goes content2c</div>
  </div>

  <div id="panel3" class="panel">
    <div class="content_03a">Here goes content3a</div>
    <div class="content_03b">Here goes content3b</div>
  </div>

</div>

<div class="buttons">
  <div class="panel_button" data-target="#panel1"> Button_01 </div>
  <div class="panel_button" data-target="#panel2"> Button_02 </div>
  <div class="panel_button" data-target="#panel3"> Button_03 </div>
</div>

如您在上面的代码中所见，我根据推入的contents显示/隐藏button。
到目前为止，所有这些都工作正常。

---

但是，一旦单击button，我想更改“传入”内容的动画。
现在，当您单击button时，新的content会以某种方式从下方滑入并覆盖先前的content。但是，我只希望在单击content而没有“滑动”时立即立即切换。因此，我将button放在了0上，但是它不起作用。

您是否知道我需要在代码中进行哪些更改才能使其正常工作？

Answer 1

您可以使用hide()代替slideUp()和show()代替slideToggle()：

$(document).ready(function() {
  $(".panel_button").on('click', function() {
    $(".panel").hide();
    var targetPanel = $(this).attr('data-target');
    $(targetPanel).show();
    $(this).toggleClass('active');
  });
});

body {
  height: 500px;
}

.contents {
  width: 100%;
  height: 20%;
}

.buttons {
  background-color: green;
  float: left;
  width: 100%;
}

.panel_button {
  float: left;
  width: 30%;
}

#panel1, #panel2, #panel3 {
  background-color: blue;
  float: left;
  width: 100%;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contents">

  <div id="panel1" class="panel">
    <div class="content_01a">Here goes content1a</div>
    <div class="content_01b">Here goes content1b</div>
  </div>

  <div id="panel2" class="panel">
    <div class="content_02a">Here goes content2a</div>
    <div class="content_02b">Here goes content2b</div>
    <div class="content_02c">Here goes content2c</div>
  </div>

  <div id="panel3" class="panel">
    <div class="content_03a">Here goes content3a</div>
    <div class="content_03b">Here goes content3b</div>
  </div>

</div>

<div class="buttons">
  <div class="panel_button" data-target="#panel1"> Button_01 </div>
  <div class="panel_button" data-target="#panel2"> Button_02 </div>
  <div class="panel_button" data-target="#panel3"> Button_03 </div>
</div>