Javascript 滑动面板动画

我想在我的项目中显示一个滑动面板，从底部固定的div向上滑动

此滑动面板将用于扩展现有图元的视图

我有一些问题，让它在哪里开始滑动，尊重他父母的填充物，等等

我制作了一个代表我的问题的示例项目：

在这本书中，我想：

从红色的div顶部打开滑动面板。正如您会注意到的，当您单击按钮打开它时，滑动面板从页面底部开始播放动画，并在我的div上以红色显示。 将滑动面板与红色div对齐。 下面是我的问题：

如何从红色的div顶部开始滑动动画。 我已经试过了：

.sliding-panel-wrapper {
    /* Other Css property */
    margin-bottom: /*Height of the red div*/;
    bottom: 0;
}

$("#mybtn").click(function() {
    // Increase height instead of moving it from outside of the page to inside
    $("#slidingPanel")[0].style.height= '500px'
});

此解决方案适用于我的面板的起始位置，但我不希望滑动面板增加其尺寸，而是滑动

我怎样才能给他与红色div完全相同的大小/填充/边距等，因为递归地寻找他父母的填充和边距似乎不是最好的解决方案。 编辑：我正在寻找一个通用的解决方案，如果可能的话，我希望我的滑动面板能够适应我上面定义的约束，如果它们发生变化，那么我希望避免在css中给出硬编码的值

---

编辑2：总结我的问题是：如何制作一个不是从页面底部而是从另一个div顶部的面板幻灯片请查看我的plunker

如果我理解你的问题，你会想要一个脱离页面的滑动面板，然后当点击按钮时，它会在页面上滑动

如果是这样的话，这将回答你的问题

这是将div id设置为slide的html代码。该按钮具有一个名为Slide的onclick功能

<div id="slide"></div>
<button onclick="Slide()">Slide</button>

单击幻灯片按钮时，将调用此javascript。如果div在屏幕外，则它将滑到屏幕上；如果div在屏幕上，则它将滑出屏幕。但请确保您设置的值符合您的需要，因为这些值可能不适用于您的解决方案

var a = false;
    function Slide() {
        if (a) {
            $('#slide').css('bottom', '-52%');
            a = false;
        }
        else {
            $('#slide').css('bottom', '0%');
            a = true;
        }



    }

---

任何问题都可以问。

嗨，是的，这几乎就是我所需要的，我意识到我最初的帖子并不是很清楚我的需要。事实上，您描述的解决方案与我在Plunker中所做的类似。问题是，我在屏幕底部固定了一个div，我想隐藏我的滑动面板，不仅仅是在页面之外，但也在这个div后面。我希望我的面板不是从页面底部滑动，而是从页面底部的div顶部滑动。那么你希望这个蓝色div用按钮滑到红色div后面吗？如果是，则使用z指数：-1；在滑动分区的css中。是的！谢谢，这是两个问题之一。现在我需要找到一种方法来对齐这个div和红色div如果你想让蓝色div和红色div对齐，请使用right:auto；在滑动div的css中。如果你想让红色div与蓝色div对齐，那么在容器类中去掉所有右边距css。右：auto正是我想要的。所有问题都解决了！谢谢你！

var a = false;
    function Slide() {
        if (a) {
            $('#slide').css('bottom', '-52%');
            a = false;
        }
        else {
            $('#slide').css('bottom', '0%');
            a = true;
        }



    }