Animating addClass/RemoveClass

Question

我有一个滑动面板。打开一个按钮时，它会打开：yhen在打开面板时单击另一个按钮，它只是替换内容。

我想对内容替换进行动画动画。打开面板时的内容淡入内容。当面板已经打开时，淡入当前内容和Fadein新内容。

github的示例。github示例

代码 X X X X

    <div class="panel right">
      <div class="close-button">
        <a href="#" id="close" class="close">
         <i class="icon-cancel">X</i>
        </a>
     </div>
     <div>
      <h2>Everything you need to know</h2>
      <div id="php-content"></div>
     </div>
    </div>
    <span class="clear"></span>
    </div>

JS

    $(document).ready(function(){
        var ajaxUrls = [
            'snip1.html',
            'snip2.html',
            'snip3.html',
            'snip4.html'
        ];
        var ajaxFiles = [];

        for(var i=0; i<ajaxUrls.length; i++){
            $.ajax({
                method: 'GET',
                url: ajaxUrls[i],
                success: function(data){
                    //console.log(data);
                    ajaxFiles.push(data);
                }
            });
        }
        $('.pan-item > button').on('click', function(){
            if($('.panel.left').hasClass('open')){
                //alert('already open');
            }else{
                $('.panel.left').addClass('open', 2000, "easeInBack");
                $('.standorte-wrapper').addClass('expand');
            }
            $('#php-content').html(ajaxFiles[$(this).attr('data-ajaxFile')]);
        });

        $('#close').on('click', function(){
            $('.panel.left').removeClass('open');
            $('.standorte-wrapper').removeClass('expand');
        });
    });

thx帮助

>>>链接到小提琴

Answer 1

仅几个修复程序（延迟显示AJAX之后的内容）

$(document).ready(function() {
  var ajaxUrls = [
    'snip1.html',
    'snip2.html',
    'snip3.html',
    'snip4.html'
  ];
  var ajaxFiles = [];
  for (var i = 0; i < ajaxUrls.length; i++) {
    $.ajax({
      method: 'GET',
      url: ajaxUrls[i],
      success: function(data) {
        //console.log(data);
        ajaxFiles.push(data);
      }
    });
  }
  $('.pan-item > button').on('click', function() {
    if ($('.panel.left').hasClass('open')) {
      //alert('already open');
    } else {
      $('.panel.left').addClass('open', 2000, "easeInBack");
      $('.standorte-wrapper').addClass('expand');
    }
    $('#php-content').html(ajaxFiles[$(this).attr('data-ajaxFile')]);
    setTimeout(function (){
$('.panel.right div').fadeIn(400);
}, 1000);
		
  });
  $('#close').on('click', function() {
      
$('.panel.right div').fadeOut(400);
setTimeout(function (){
    $('.panel.left').removeClass('open');
    $('.standorte-wrapper').removeClass('expand');
    }, 500);
  });
});

.standorte-wrapper {
  height: 100%;
  margin: 0;
  padding: 0;
}
.panel {
  height: 100vh;
  transition: width .8s;
}
.left {
  position: relative;
  width: 100%;
  float: left;
  height: 100%;
  background: red;
}
.panel.right div
{
  display: none;
}
.right {
  float: right;
  width: 0%;
  background: rgba(0, 0, 0, 0.80);
  overflow: hidden;
  text-align: left;
  color: white;
}
.standorte-wrapper.expand .left {
  width: 50%;
}
.standorte-wrapper.expand .right {
  width: 50%;
}
button.show-hide {
  /* margin:0 auto; */
  /* top: 200px; */
  /* position: absolute; */
}
.pan-item {
  position: relative;
  width: 50%;
  height: 50%;
  float: left;
}
.tl {
  top: 0;
  left: 0;
  background: purple;
}
.tr {
  top: 0;
  right: 0;
  background: gray;
}
.bl {
  bottom: 0;
  left: 0;
  background: lime;
}
.br {
  bottom: 0;
  right: 0;
  background: cyan;
}
.close-button {
  width: 70px;
  height: 70px;
  left: 0;
  background: rgba(277, 6, 19, 0.75);
  margin-top: 85px;
  border: none;
  border-radius: 0;
  text-align: center;
}
.close-button a {
  text-decoration: none;
}
.close-button i {
  text-align: center;
  vertical-align: middle;
  line-height: 70px;
  color: #111112;
  font-size: 24px;
  display: block;
}
.hidden {
  display: none;
}
.snippet {
  width: 100%;
  text-align: center;
}
.snipet h1 {
  font-size: 1.2em;
}
.clear {
  display: block;
  clear: both;
}
html {
  height: 100%;
}
body {
  margin: 0;
  height: 100%;
}
.php-content {
  height: 100%;
}
button {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="standorte-wrapper">
  <div class="panel left">
    <div class="pan-item tl">
      <button data-ajaxFile="0">X</button>
    </div>
    <div class="pan-item tr">
      <button data-ajaxFile="1">X</button>
    </div>
    <div class="pan-item bl">
      <button data-ajaxFile="2">X</button>
    </div>
    <div class="pan-item br">
      <button data-ajaxFile="3">X</button>
    </div>
  </div>
  <div class="panel right">
    <div class="close-button">
      <a href="#" id="close" class="close">
        <i class="icon-cancel">X</i>
      </a>
    </div>
    <div>
      <h2>Everything you need to know</h2>
      <div id="php-content"></div>
    </div>
  </div>
  <span class="clear"></span>
</div>

Answer 2

您可以使用.fadein（Interval Speed）或.fadeOut（Interval Speed）函数来动画淡入和淡出。

Answer 3

j.doe Works的答案。

jsfiddle.net/wbcf68k1/5-玩得开心并永远留下编码 - J. Doe 27分钟前