fadeIn() 然后使用 jQuery 同时制作动画（多个 id）

Question

我想不通了。如果有人可以帮助我解决这个问题，我将不胜感激。比如说，我有 6 个立方体，我想将它们一个一个地淡入屏幕，然后同时展开。我正在使用 fadeIn 和 animate 方法。这是我的代码，

HTML

<div id="parentBox">
        <svg id="polyWhite" width="200" height="270" viewBox="0 0 512 606">
            <g>
                <polygon points="256,343 47,195 256,55 465,195" class="top-white" />
                <polygon points="256,343 465,195 465,480 256,627" class="right-white" />
                <polygon points="256,343 256,627 47,480 47,195" class="left-white" />
            </g>
        </svg>
        <svg id="polyBlack" width="200" height="270" viewBox="0 0 512 606">
            <g>
                <polygon points="256,343 47,195 256,55 465,195" class="top-black" />
                <polygon points="256,343 465,195 465,480 256,627" class="right-black" />
                <polygon points="256,343 256,627 47,480 47,195" class="left-black" />
            </g>
        </svg>
        <svg id="polyRedTwo" width="200" height="270" viewBox="0 0 512 606">
            <g>
                <polygon points="256,343 47,195 256,55 465,195" class="top-red-two" />
                <polygon points="256,343 465,195 465,480 256,627" class="right-red-two" />
                <polygon points="256,343 256,627 47,480 47,195" class="left-red-two" />
            </g>
        </svg>
        <svg id="polyBlackTwo" width="200" height="270" viewBox="0 0 512 606">
            <g>
                <polygon points="256,343 47,195 256,55 465,195" class="top-black-two" />
                <polygon points="256,343 465,195 465,480 256,627" class="right-black-two" />
                <polygon points="256,343 256,627 47,480 47,195" class="left-black-two" />
            </g>
        </svg>
        <svg id="polyRedThree" width="200" height="270" viewBox="0 0 512 606">
            <g>
                <polygon points="256,343 47,195 256,55 465,195" class="top-red-three" />
                <polygon points="256,343 465,195 465,480 256,627" class="right-red-three" />
                <polygon points="256,343 256,627 47,480 47,195" class="left-red-three" />
            </g>
        </svg>
        <svg id="polyBlackThree" width="200" height="270" viewBox="0 0 512 606">
            <g>
                <polygon points="256,343 47,195 256,55 465,195" class="top-black-three" />
                <polygon points="256,343 465,195 465,480 256,627" class="right-black-three" />
                <polygon points="256,343 256,627 47,480 47,195" class="left-black-three" />
            </g>
        </svg>
        <svg id="polyRed" width="200" height="270" viewBox="0 0 512 606">
            <g>
                <polygon points="256,343 47,195 256,55 465,195" class="top" />
                <polygon points="256,343 465,195 465,480 256,627" class="right" />
                <polygon points="256,343 256,627 47,480 47,195" class="left" />
            </g>
        </svg>
    </div>

jQuery

$("svg").each(function(index) {
        $(this).delay(400 * index).fadeIn(300);
    });
    $("#polyRed").delay(2000).stop().animate({
        left: "-23",
        top: "9"
    });
    $("#polyBlack").delay(2000).stop().animate({
        left: "140",
        top: "-102"
    });
    $("#polyBlackThree").delay(2000).stop().animate({
        left: "-22",
        top: "233"
    });
    $("#polyBlackTwo").delay(2000).stop().animate({
        left: "304",
        top: "233"
    });
    $("#polyRedTwo").delay(2000).stop().animate({
        left: "305",
        top: "10"
    });
    $("#polyRedThree").delay(2000).stop().animate({
        left: "140",
        top: "345"
    });

我同时得到了动画，但是我失去了淡入的延迟。一些 jQuery 专家可以帮助我解决问题。

Answer 1

它们是异步执行的。您必须在前一个元素的动画结束时调用下一个动画（通过不透明度与使用淡入相同）。

我想这对你有帮助

var allSVGs = $("svg");
fadeIn(0);

....

function fadeIn(svgIndex){
   allSVGs.eq(svgIndex).animate({"opacity":"1"}, {
   complete:function(){
      svgIndex++;
      if(svgIndex < allSVGs.length) //Making sure we don't exceed the maximum available SVG elements
         fadeIn(svgIndex); //Recursively calling the next elements animation (hide) from the completed one.
   }});
}

编辑看到这个 jsFiddle Link。我只是评论了代码的其他区域以使事情变得更容易......

Answer 2

尝试

$("#parentBox").queue("boxes", $.map($("#parentBox svg"), function(el, index) {
    return function(next) {
        $(el).delay(400 * index).fadeTo(1000, 1, next)
    }
})).dequeue("boxes").promise("boxes")
.then(function() {
  $("#polyRed").delay(2000).stop().animate({
    left: "-23",
    top: "9"
  });
  $("#polyBlack").delay(2000).stop().animate({
    left: "140",
    top: "-102"
  });
  $("#polyBlackThree").delay(2000).stop().animate({
    left: "-22",
    top: "233"
  });
  $("#polyBlackTwo").delay(2000).stop().animate({
    left: "304",
    top: "233"
  });
  $("#polyRedTwo").delay(2000).stop().animate({
    left: "305",
    top: "10"
  });
  $("#polyRedThree").delay(2000).stop().animate({
    left: "140",
    top: "345"
  });
});

jsfiddle https://jsfiddle.net/ame17p3b/6/

fadeIn() 然后使用 jQuery 同时制作动画（多个 id）

fadeIn() and then animate (multiple id's) simultaneously using jQuery

jquery

animation

fadein