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根据jQuery切换的类动画CSS transform。

＆＃13;

$(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');
    
  });
  
});

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

IE＆lt; = 9或Opera Mini不支持某些相关的CSS3属性检查浏览器兼容性：
CSS3 Transitions
CSS3 2D Transforms

Answer 2

我在.master-legend_video点击事件处理程序中添加了一个代码段，该处理程序会查看单击它时会发生什么。首先，我们分析预期文本是否存在，如果是，那么我们再添加另一个动画来跟随现有文本。为了显示文本，我们等待动画完成。

请记住，您可以轻松自定义此功能以更好地适应最终实施，因此请尽量使用它。

$(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');
        
        // Handle red to blue transition
        if ($("#modal").text().indexOf("red") > 0) {
          $("#modal").animate({
            left: "0px"
          }, {
            complete: function () {
            	$(".blue").clone().appendTo('#modal');
            }
          });
        }
      });
    });

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

<body>
  <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>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>

我想补充一点，你可以做很多好事来改善你当前的代码，例如少依赖JavaScript而不是依赖CSS。但是我确实使用了您的实现，我希望它尽可能接近您所寻找的内容。如果您有任何问题，请告诉我。

使用新信息

2 个答案: