Javascript 设置3个不同div的动画

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

以下是JSFIDLE的当前设置，让您直观地了解我希望它们如何飞行。CSS如下所示。感谢您的帮助

这是我的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;

    }

---

谢谢

有点像这样？基本上，由于设置了

vh

，因此可以将元素定位在

顶部、左侧和右侧的负片上。然后单击按钮，将元素的顶部、左侧和右侧设置为0（其原始位置）

我在那里也添加了一点不透明度，如果你想的话可以删除

到目前为止，您尝试了什么？。我在你的JSFIDLE中没有找到任何javascript代码。这正是我要找的！非常感谢你！