javascript - 使用新信息对 div 进行屏幕上和屏幕上的动画处理

Question

我有两个按钮。当按下按钮 1 时，div 会在屏幕上滑动。当再次按下按钮 1 时，它会滑出屏幕。很好。

现在，当按下按钮 1 时，div 就会滑动。当 div 在屏幕上时按下按钮 2 时，div 会滑落。我想要第二个按钮将 div 滑出并滑回新信息。

我现在的工作正常，但我需要添加一个步骤，让第二个按钮离开屏幕并返回新信息。

我怎样才能实现这个目标？

$(document).ready(function() {

  function legendButton(name) {
    var modalLeft = $('#modal').css('left');

    if (modalLeft === "-75px") {
      // Move on-screen
      $('.' + name + '').clone().appendTo('#modal');
      $('#modal').animate({
        left: "0"
      }, 'fast');
    } else if (modalLeft === "0px") {
      // Move off-screen
      $('#modal').animate({
        left: "-75px"
      }, 'fast', function() {
        $('#modal').empty();
      });
    }
  }

  $('.master-legend_faq').off('click').on('click', function() {
    legendButton('red');
  });

  $('.master-legend_video').off('click').on('click', function() {
    legendButton('blue');
  });
});

#modal {
  border: 10px solid #eee;
  padding: 10px;
  position: absolute;
  left: -75px;
  top: 120px;
  max-width: 50;
  z-index: 10;
  background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="legend">
  <li class="master-legend_faq">
    <a href="#">Contains FAQ's<br><div class="faq"></div></a>
  </li>
  <li class="master-legend_video">
    <a href="#">Contains Video<br><div class="video"></div></a>
  </li>
</ul>

<div id="modal" class="col10"></div>

<li class="red">
  red stuff
</li>
<li class="blue">
  blue stuff
</li>

View on JSFiddle

Answer 1

这是一种替代方法。它使用 CSS transition为 CSS 制作动画 transform基于由 jQuery 切换的类。

$(function () {
  
  var $modals = jQuery('.modal');
  
  jQuery('#legend a').on('click', function (e) {
    
    e.preventDefault();
    
    var name = jQuery(this).data('modal'),
        $target = jQuery('.modal_' + name);
    
    $modals.not($target).removeClass('open');
    $target.toggleClass('open');
    
  });
  
});

.modal {
  position: absolute;
  border: 10px solid #eee;
  padding: 10px;
  left: 0;
  background: #fff;
  transform: translateX(-100%);
  -webkit-transition: left 1s ease-in-out;
  transition: all .5s ease-in-out;
}

.modal.open {
  transform: translateX(0);
}

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

<ul id="legend">
  <li><a href="#" data-modal="faq">Contains FAQ's</a></li>
  <li><a href="#" data-modal="video">Contains Video</a></li>
</ul>

<div class="modal modal_faq">FAQ stuff</div>
<div class="modal modal_video">VIDEO stuff</div>

<小时/>

IE<=9 或 Opera Mini 不支持某些相关 CSS3 属性。
检查浏览器兼容性:
CSS3 Transitions
CSS3 2D Transforms