Jquery 分区'；s作为一个动画，而不是单个动画

我正在尝试在我的网站上制作一个类似动画的材质设计。如您所见，当我按下按钮时，每个按钮都会设置动画，而不是仅设置我按下的按钮的动画。编辑：在我制作了gif之后，我设法在它们上获得了一个平滑的动画，但它们仍然像一个动画一样。这是我得到的动画。 以下是我的查询代码：

    $(document).ready(function() {
    var toggleState = true;
    $('.show').on("click", function() {
        if(toggleState) {
            $(this).find('svg').each(function(){
                $(this).css({
                    transform: "rotate(180deg)"
                });
            });
            $(document).find('.box').each(function(){
                $(this).css({
                    height: "+=200"
                },1000);
            });
        } else {
            $(this).find('svg').each(function(){
                $(this).animate({
                    transform: "rotate(+=180deg)",
                });
            });
            $(document).find('.box').each(function(){
                $(this).css({
                    height: "240" // this is the default height
                },1000);
            });
        }
        toggleState = !toggleState;
    });
});
// .show is the container of the svg(the arrow). .box is the container of the whole thing

PS：在制作了.gif之后，我成功地制作出了一个平滑的动画，唯一的问题是它们的效果是一致的。 PS2：不要介意光标

甚至更多的代码

<div class="fluid-layout">
    <article class="box-wrapper">
        <section class="box">
            <div class="main-color" id="red">
            </div>
            <div class="show">
                <svg class="svg" xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
                    <path d="M18 12l-9 9 2.12 2.12 6.88-6.88 6.88 6.88 2.12-2.12z"/>
                    <path d="M0 0h36v36h-36z" fill="none"/>
                </svg>
            </div>
        </section
        ><section class="box">
            <div class="main-color" id="pink">
            </div>
            <div class="show">
                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
                    <path d="M18 12l-9 9 2.12 2.12 6.88-6.88 6.88 6.88 2.12-2.12z"/>
                    <path d="M0 0h36v36h-36z" fill="none"/>
                </svg>
            </div>
        </section
        ><section class="box">
            <div class="main-color" id="purple">
            </div>
            <div class="show">
                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
                    <path d="M18 12l-9 9 2.12 2.12 6.88-6.88 6.88 6.88 2.12-2.12z"/>
                    <path d="M0 0h36v36h-36z" fill="none"/>
                </svg>
            </div>
        </section
        >
    </article>
</div>

---

我认为问题源于这里的代码

 $(document).find('.box').each(function(){
            $(this).css({
                height: "240" // this is the default height
            },1000);

及

您正在搜索文档中的box类，并同时将css应用于所有这些box。如果我知道这些框的html结构，我可以帮你解决这个问题

有关最近（）的文档，请参阅

编辑：

替换

$(document).find('.box').each(function(){

与

将有助于解决这一特殊问题。看

然而，这些盒子现在会奇怪地移动。要解决这个问题，您需要做一些CSS工作

除去

display: table-cell;

从

然后添加一个新的CSS块，以重新居中删除前一行CSS而弄乱的文本

.main-color span{
    display:block;
    line-height: 5em; 
}

---

你能把你的代码放在JSFIDLE中吗？这样可以很容易地调试/给出反馈。有什么想法吗？小提琴补充道。看看下面你的评论。做这件事，给我几分钟=）它确实有帮助。但是有没有办法让它不影响页面的其他部分呢？这可以在移动设备上使用，因为每行只显示一个框，但是在更大的屏幕上。从CSS中删除“display:table cell；”，很抱歉花了这么长时间才回复您。这将使文本框中的文本有点混乱，但它们不会像以前那样移动。will do，没问题，只使用一列而不是3列制作了一个版本，但我有时间时会尝试！

display: table-cell;

.fluid-layout .color-group .main-color span {

.main-color span{
    display:block;
    line-height: 5em; 
}