动画3个不同的Div

Question

我正在寻找一种方法让3个div在点击时飞入。一个DIV在顶部，一个在左侧，一个在右侧（左侧和右侧都在顶部下方）。当我点击使用JQuery时，我想让它们全部飞入（从顶部，从左到左，从右到右）。我遇到的问题是我无法让他们飞到正确的地方。

这是JSfiddle目前设置的方式，为您提供我希望它们如何飞行的视觉图像。 CSS在下面。任何帮助表示赞赏!!

https://jsfiddle.net/v59yLz3p/

继承我的CSS：

.topcontent
    {
        top: 0;
        background-color: green;
        height: 30vh;

    }

    .leftcontent
    {
        height: 70vh;
        width: 50%;
        position: relative;
        float: left;
        background-color: red;
    }
    .rightcontent
    {
        height: 70vh;
        width: 50%;
        position: relative;
        float: right;
        background-color: blue;

    }

谢谢！

Answer 1

有点像这样吗？基本上，由于您设置了vh，因此您可以将元素定位为top, left, and right的负数。然后在按钮上单击，将元素的top, left, and right设置为0（它们的原始位置）。

我在那里添加了一点不透明度，如果你愿意，可以删除。

Fiddle