Javascript 在引导模式内创建滑动效果_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 在引导模式内创建滑动效果

javascript jquery html css twitter-bootstrap

Javascript 在引导模式内创建滑动效果,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我想在点击按钮时在模式窗口内滑动一些内容。我想要的效果是一个类似滑块的示例效果，可以找到：我试着做宽度切换，但不幸的是，结果与我预期的不同，更重要的是，当内容滑动时，模式的高度会发生变化。我需要的只是一张内容幻灯片和其他幻灯片。jQueryUI有幻灯片效果，但由于技术细节的原因，我不想使用它。我想实现一个JQuery+CSS解决方案有人能帮我吗？是我开发的代码 HTML: 更新到以前的答案。这将为您提供模式覆盖的左/右滑入模块。您可以查看主覆盖高度设置。 HTML: Javascrip

我想在点击按钮时在模式窗口内滑动一些内容。我想要的效果是一个类似滑块的示例效果，可以找到：

我试着做宽度切换，但不幸的是，结果与我预期的不同，更重要的是，当内容滑动时，模式的高度会发生变化。我需要的只是一张内容幻灯片和其他幻灯片。jQueryUI有幻灯片效果，但由于技术细节的原因，我不想使用它。我想实现一个JQuery+CSS解决方案

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

HTML:

更新到以前的答案。这将为您提供模式覆盖的左/右滑入模块。您可以查看主覆盖高度设置。

HTML:

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

然而，它不同于我想要的滑块效果（），而且模态的高度可能会动态地改变。因此，在我看来，定义静态宽度不是一个好的解决方案。引导转盘和代码中的内容是完全不同的实现。你还需要包括引导插件来使用旋转木马功能事实上我不想要旋转木马，我只想要第一个内容跳出屏幕，第二个内容幻灯片，而不考虑将整个代码添加到问题中，jsbin链接可能会在稍后消失，这个问题对于死链接来说毫无价值。

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

});

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

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

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