Javascript Div向右对齐并根据右侧的其他Div更改x位置

总的来说，我想要这样的东西jsfiddle.net/DSghU/

只是整个事情没有向左边滑。它应滑出至右侧。因此，通过点击按钮，按钮将完全转到右侧

编辑 我能够解决第一个问题：jsfiddle.net/kwoxer/7hne1d0b/

但现在我正在寻找一个小的解决方案。我真的很不喜欢文本在切换时刹车。我如何设置它，使文本不被制动

编辑2 目前的解决方案已经很酷了。但其他内容还有一个小问题。它正在向底部移动。那么，这些切换元素如何真正像覆盖层一样呢。这里有一个例子：jsfiddle.net/kwoxer/7hne1d0b/4/我希望其他文本（左侧）保持原样。还有一个SVG

编辑3

---

我发现了。您需要另一个内部div:jsfiddle.net/kwoxer/7hne1dob/5/但我认为这不是一个很酷的解决方案，对吗？如果有人找到更好的方法，请告诉我。

这是正确的吗。请看下面的小提琴：

基本上我只是在css中添加了一些东西

#myDiv {
    position:relative;
    top:50px;
    color:Green;
    background-color:#eee;
    border:2px solid #333;
    text-align:justify;
    float:right;
    width:200px;
    overflow:hidden;
}
#button{
    position: absolute;
    top:80px;
    right:0px;
    float:right;
}
.other_details{
    position:relative;
    top:50px;
    float:right;
    font-weight:bold;
    width:200px;
    border:1px solid black;
    padding:5px;
    margin-left:2px;
}

---

为了实现您的目标，您需要设置

左

位置或

左边距

的动画。在这两种情况下，各自的div应该用另一个容器包装，容器上有溢出：隐藏

var targetWidth = $('#myDiv').css("margin-left") == "200px" ? "0px" : "200px";

if (!$("#myDiv").is(":visible")) {
    $("#myDiv").show();
}

$('#myDiv').animate({marginLeft: targetWidth}, duration, function () {
    if ($(this).css("margin-left") == "200px") {
        $(this).hide();
    } else {
        $(this).show();
    }
});

---

演示：解决方案非常简单。只需要更改一点CSS，并编辑HTML中的顺序和元素

---

这就是我想要的：jsfiddle.net/kwoxer/7hne1d0b/2/

你说的文本中断是什么意思？你说的是切换结束时的抖动吗？在第一个答案的评论中添加了信息。我的意思是，在制动的最末端，第一行仍然应该是“Lorem Ipsum is simply”，但实际上要少得多。我不知道改变宽度是否有可能。但也许你知道些什么。仍然困惑你是什么意思？@kwoxerOhh已经有了它=）我只需要一个固定宽度的内部div。这就是我想要的：也许你可以告诉我我用一种不好的方式描述了什么，这样我就可以改进它。谢谢。看看我的解决方案。这就是我想要的=无论如何谢谢。你的解决方案更简单！非常感谢，但还有一个问题是，我在后台有一个SVG。如果我将其设置在上方，它会将SVG移动到底部。那么我怎么能说这个div就像一个覆盖层呢。不损害任何其他元素。但是还有另一个区域在toggline区域的左侧吗？也许你可以帮我完成上面最后一件事=）编辑。