幻灯片弹出时内容移动

Question

当我的幻灯片显示时，有没有办法让左侧的内容居中？当您单击右侧的图片时，幻灯片会显示。对此有任何帮助吗？

到这里

我正在使用这个 js 脚本：

 function toggleDiv(divNum) {

        $("#close").hide();
        $(".slide").animate({
            right: '-400'
        }, 350);
        if ($("#div" + divNum)) {

            $("#div" + divNum).animate({
                right: '0'
            }, 350, function() {
                $("#close").show();
            });
        }
    }

    $(document).ready(function() {
        $("#close").on("click", function(e) {
            $(".slide").animate({
                right: '-400'
            }, 350);
            $(this).hide()
        })

    })

这是我的 CSS

.slide {
    width: 400px;
    height: 100%;
    position: absolute;
    right: -400px;
    top: 0;
    background: #6b4788;
}

#right-content {
    position: absolute;
    right: 0;
    top: 0;
    overflow: hidden;
    width: 400px;
    height: 100%;
}

#close {
  position:absolute;
  right:10px;
  top:10px;
  z-index:10;
  display:none;
}

这里是HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onClick="toggleDiv(1)">Try it 1</button>
<button onClick="toggleDiv(2)">Try it 2</button>
<button onClick="toggleDiv(3)">Try it 3</button>

<div id="right-content">
  <div id="close">X</div>
  <div class="slide" id="div1">content 1</div>
  <div class="slide" id="div2">hey I'm content 2</div>
  <div class="slide" id="div3">Now it's content 3</div>
<div>

谢谢。

Answer 1

请注意，居中 div 的宽度是由 css (100%-200px) 计算的，它的动画是通过使用 css 过渡设置的，并向该 div 添加/删除自定义类：

.width-slide {
  width: calc(100% - 400px) !important;
}

你可以在下面找到一个完整的例子：

function toggleDiv(divNum) {
    //removing px word from width size
    if(slideWidth)
       slideWidth = slideWidth.replace("px","");
    else slideWidth=200;
    
    $("#close").hide();
    $("#center-content").removeClass("width-slide");
    $("#right-content").animate({right:-slideWidth},350,
    function(){
       $("#center-content").addClass("width-slide");
       $(".slide").hide();
       if($("#div"+divNum)) {
         $("#div"+divNum).show();
       }
       $("#right-content").animate({right:'0'},350,
       function(){
         $("#close").show();
         
       });
    });
}
var slideWidth = 200;
    
$(document).ready(function(){
   slideWidth = $("#right-content").css("width");
    
   $("#close").on("click",function(e){
      $("#right-content").animate({right:-slideWidth},350);
      $("#center-content").removeClass("width-slide");
      $(this).hide()
   })

})

.slide {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  background:#d2d2d2;
}



#close {
  position:absolute;
  right:10px;
  top:10px;
  z-index:10;
  display:none;
}

body {
  overflow:hidden;
}

#main-content {
  position:absolute;
  width:100%;
}

#right-content {
  position:absolute;
  right:-400px;
  top:0;
  #overflow:hidden;
  width:400px;
  height:100%;
}



#center-content {
  border:1px solid black;
  margin:auto;
  text-align:center;
  z-index:1000;
  width:100%;
  float:left;
  transition:width .35s ease; /* here set the transition */
}

/*class to set width -200px*/
.width-slide {
  width: calc(100% - 400px) !important;
}

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

<div class="main-content">
  <div id="center-content">
    <button onClick="toggleDiv(1)">Try it 1</button>
    <button onClick="toggleDiv(2)">Try it 2</button>
    <button onClick="toggleDiv(3)">Try it 3</button>
  </div>
  <div id="right-content">
    <div id="close">X</div>
    <div class="slide" id="div1">content 1</div>
    <div class="slide" id="div2">hey I'm content 2</div>
    <div class="slide" id="div3">Now it's content 3</div>
  <div>
</div>

更改以使用新的幻灯片宽度： 在 CSS 中：

#right-content-->width : newWidth和right : -newWidth

.width-slide-->width: calc(100% - newWidth ) !important;

在 js 中：动态计算#right-content。 就这些