Question

我有以下jQuery代码，也可以在JSfiddle here中找到：

/* Code for buttons individually */
$(document).ready(function() {
  $(".panel_button").on('click', function() {
    $(".panel").hide();
    var targetPanel = $(this).attr('data-target');
     $(targetPanel).show();
    $(this).toggleClass('active');
  });
});


/* Code for previous and next buttons */
$(document).ready(function(){
    $(".panel").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $(".next_button").click(function(){
        if ($(".panel:visible").next().length != 0)
            $(".panel:visible").next().show().prev().hide();
        else {
            $(".panel:visible").hide();
            $(".panel:first").show();
        }
        return false;
    });

    $(".prev_button").click(function(){
        if ($(".panel:visible").prev().length != 0)
            $(".panel:visible").prev().show().next().hide();
        else {
            $(".panel:visible").hide();
            $(".panel:last").show();
        }
        return false;
    });
});

body {
  height: 500px;
}

.contents {
  width: 100%;
  height: 20%;
}

.buttons {
  background-color: green;
  float: left;
  width: 100%;
}

.panel_button, .prev_button, .next_button {
  float: left;
  width: 20%;
  
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

#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="prev_button"> PREVIOUS </div>

  <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 class="next_button"> NEXT </div>
  
</div>

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

现在，我想向内容的显示/隐藏中添加一个fading动画。因此，正如您在JSfiddle here中所看到的，我尝试将.hide更改为.fadeOut，将.show更改为.fadeIn，但不幸的是，此动画实际上并没有顺利运行。
内容首先出现在上一个内容的下方，并且一旦前一个内容完全淡出，它们就会跳到最终位置。

您知道我必须在代码中进行哪些更改以避免这种跳跃吗？

Answer 1

@per @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ er.pera.per @@@@@@@@@@@@@@@@@@@@@@@@@@@ pererper @@@@ hl @@@@@@@@@@@@@@@@@@ papera @@@@@@@@@@@@@@ paer @ perth @@@@@@@@@@@@@@@@ ppereer @ per @@@@@@@@@@@@@@@@@@@@@ p.e.p.asper@Thielicious），您需要为那些面板添加绝对位置，以使所有面板保持相同的位置，以使它们不会闪烁，并且您可以添加回叫功能，以在淡出所有面板后显示期望面板，以期待您希望哪个面板要显示。

  $(".panel_button").on('click', function() {
      var id=$(this).data('target');
      $(".panel:not('"+id+"')").fadeOut('slow',function(){
       $(id).fadeIn('slow');
      })
 });

http://jsfiddle.net/koanfw15/55/

Answer 2

您可以为fade in和fade out添加持续时间。我为你增加了一点点时间。

  

  /* Code for buttons individually */
    /* Code for buttons individually */
$(document).ready(function() {
  $(".panel_button").on('click', function() {
    $(".panel").fadeOut(1000);
    var targetPanel = $(this).attr('data-target');
     $(targetPanel).fadeIn(1000);
    $(this).toggleClass('active');
  });
});


/* Code for previous and next buttons */
$(document).ready(function(){
    $(".panel").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $(".next_button").click(function(){
        if ($(".panel:visible").next().length != 0)
            $(".panel:visible").next().fadeIn(1000).prev().fadeOut(1000);
        else {
            $(".panel:visible").fadeOut(1000);
            $(".panel:first").fadeIn(1000);
        }
        return false;
    });

    $(".prev_button").click(function(){
        if ($(".panel:visible").prev().length != 0)
            $(".panel:visible").prev().fadeIn(1000).next().fadeOut(1000);
        else {
            $(".panel:visible").fadeOut(1000);
            $(".panel:last").fadeIn(1000);
        }
        return false;
    });
});

body {
  height: 500px;
}

.contents {
  width: 100%;
  height: 20%;
}

.buttons {
  background-color: green;
  float: left;
  width: 100%;
}

.panel_button, .prev_button, .next_button {
  float: left;
  width: 20%;
  
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

#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="prev_button"> PREVIOUS </div>

  <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 class="next_button"> NEXT </div>
  
</div>

Answer 3

#panel1, #panel2, #panel3 {
  position: absolute; // <-- add this line
  background-color: blue;
  float: left;
  width: 100%;
  display: none;
}

修正：http://jsfiddle.net/Dezain/ydgx3szt/

Answer 4

您最好为淡入或淡出添加一些持续时间以使其更加生动还添加CSS

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

我更新了您的fiddle，请看一下新动画。

显示/隐藏带有淡入淡出的内容

4 个答案: