Question

我想在单击按钮时在模态窗口内滑动一些内容。我想要的效果是样本滑块效果，可以找到here：

我尝试进行宽度切换，但遗憾的是它与我预期的结果不同，更重要的是当内容滑动时模态的高度会发生变化。我需要简单地将一个内容滑出，另一个滑入.JQuery UI具有幻灯片效果但是我不想因为技术细节而使用它。我想实现一个JQuery + CSS解决方案。

有人能帮帮我吗？ Here是我开发的代码。

HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <div class="first-content">
          <p>Some text in the modal.</p>
          <button type="button" class="btn btn-info first-button">First Button</button>
        </div>
        <div class="second-content" style="display:none">
          <p>Second content</p>
          <button type="button" class="btn btn-info">Second Button</button>
        </div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
</body>
</html>

JS：

$(function () {
  $('.first-button').on('click', function () {
      $('.first-content').animate({width: "toggle"}, 800);
      $('.second-content').delay( 800 ).animate({width: "toggle"});
  });

  $('.second-content').on('click', function () {
    $('.second-content').animate({width: "toggle"});  
    $('.first-content').delay( 800 ).animate({width: "toggle"}, 800);    
  });

});

Answer 1

更新到上一个答案。这将为您提供左/右模块中的模式叠加幻灯片。您可以调整主叠加高度设置。 https://jsbin.com/wolijunogu/edit?html,css,js,output

HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

<button type="button" class="btn btn-info openModal" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <div class="first-content">
          <p>Some text in the modal.<br>test for different height<br>test for different height</p>
          <button type="button" class="btn btn-info first-button">First Button</button>
        </div>
        <div class="second-content" style="display:none">
          <p>Second content</p>
          <button type="button" class="btn btn-info second-button">Second Button</button>
        </div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
</body>
</html>

CSS：

.modal-body div p{
  overflow: hidden;
}
.first-content{
  width: 100%;
  float:left;
}
.second-content{
  width: 100%;
  float: right;
}

使用Javascript：

$(function () {
  $(".openModal").click(function(){
    setTimeout(function(){
      var h=$(".modal-body .first-content p").height();
      $(".modal-body").css('height',h+80+'px');
      $(".modal-body .first-content p").css('height',h+'px');
    },250);
  });
  $('.first-button').on('click', function () {
    $('.first-content').animate({width:"toggle"}, function(){
      $('.second-content').animate({width:"toggle"});
        var h=$(".modal-body .second-content p").height();
        $(".modal-body").css('height',h+80+'px');
        $(".modal-body .second-content p").css('height',h+'px');
      });
  });
  $('.second-button').on('click', function () {
    $('.second-content').animate({width:"toggle"},function(){
      $('.first-content').animate({width:"toggle"});
        var h=$(".modal-body .first-content p").height();
        $(".modal-body").css('height',h+80+'px');
        $(".modal-body .first-content p").css('height',h+'px');
    });
  });
});

在Bootstrap模式中创建滑动效果

1 个答案: