Javascript 幻灯片弹出时内容移动

是否有一种方式，当我的幻灯片出现时，左侧的内容会集中在其一侧？单击右侧的图片时，幻灯片将显示。这方面有什么帮助吗

对此

我正在使用这个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>

试试看
试试它2
试试看
X
内容1
嘿，我很满足
现在是内容3

---

谢谢。

请注意，居中div的宽度是由css（100%-200px）计算的，其注释是通过使用css转换和向该div添加/删除自定义类来设置的：

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

下面您可以找到一个完整的示例：

函数切换div（divNum）{
//从宽度大小中删除px字
如果（滑动宽度）
slideWidth=slideWidth.replace（“px”和“）；
否则，滑动宽度=200；
$（“#关闭”）.hide（）；
$（“#中心内容”）.removeClass（“宽度幻灯片”）；
$（“#右内容”）。动画（{right:-slideWidth}，350，
函数（）{
$（“#中心内容”）.addClass（“宽度幻灯片”）；
$（“.slide”）.hide（）；
如果（$（“#div”+divNum））{
$（“#div”+divNum）.show（）；
}
$（“#右内容”）。动画（{右：'0'}，350，
函数（）{
$（“#关闭”）.show（）；
});
});
}
var slideWidth=200；
$（文档）.ready（函数（）{
slideWidth=$（“#右内容”）.css（“宽度”）；
$（“#关闭”）。在（“单击”上，函数（e）{
$（“#右内容”）.animate（{right:-slideWidth}，350）；
$（“#中心内容”）.removeClass（“宽度幻灯片”）；
$（this.hide（））
})
})

。幻灯片{
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
背景：#d2d2d2；
}
#接近{
位置：绝对位置；
右：10px；
顶部：10px；
z指数：10；
显示：无；
}
身体{
溢出：隐藏；
}
#主要内容{
位置：绝对位置；
宽度：100%；
}
#正确内容{
位置：绝对位置；
右：-400px；
排名：0；
#溢出：隐藏；
宽度：400px；
身高：100%；
}
#中心内容{
边框：1px纯黑；
保证金：自动；
文本对齐：居中；
z指数：1000；
宽度：100%；
浮动：左；
过渡：宽度.35s；此处设置过渡*/
}
/*类设置宽度-200px*/
.宽滑梯{
宽度：计算（100%-400px）！重要；
}

试试看
试试它2
试试看
X
内容1
嘿，我很满足
现在是内容3

任何HTML或JSFIDLE都会对uscode有很大帮助，我们在这里[link]先生@bRIMOs已经回答了我的问题！谢谢！！：）我想我的幻灯片是400px？我该怎么做？再次感谢您：），@KeithMercado我成功地将其更改为400px，无论您想更改宽度，只需按照答案底部的说明进行操作。Siao@KeithMercado有意义吗：），如果有，请将答案标记为已解决：）是的！谢谢！：）