动画 addClass/RemoveClass

Question

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

我想为内容替换制作动画。打开面板时淡入内容。当面板完全打开时，淡出当前内容并淡入新内容。

github 上的示例。 GitHub Example

代码 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');

        });

    });

感谢帮助

>>> 链接到 Fiddle

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 的回答很有效。

jsfiddle.net/wbcf68k1/5 - 玩得开心，永远离开编码世界 - J. Doe 27 分钟前