Question

我正在尝试在我的网站上制作像动画一样的Material Design。正如您所看到的，当我按下按钮时，每个按钮都会动画，而不是仅动画我按下的动画。编辑：在我制作了GIF之后，我设法在它们上得到了一个平滑的动画，但它们仍然是一个整体。 http://oi59.tinypic.com/29ek9wx.jpg这是我得到的动画。这是我的查询代码：

    $(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>

Answer 1

我认为问题源于此处的代码

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

和

$(document).find('.box').each(function(){
            $(this).css({
                height: "+=200"
            },1000);
        });

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

有关nearest（）

的文档，请参阅http://api.jquery.com/closest/

编辑：

替换

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

与

$(this).closest('.color-group').each(function(){

将帮助解决这个特定问题。见http://jsfiddle.net/FERMIS/5dLyqsyu/3/

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

除去

display: table-cell;

来自

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

然后添加一个新的CSS块来重新定位通过删除前一行CSS而搞砸的文本

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

http://jsfiddle.net/FERMIS/5dLyqsyu/4/

Div的动画作为一个，而不是单独的

1 个答案: