fadeIn(), а затем анимация (несколько идентификаторов) одновременно с использованием jQuery

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" 
    }); 

я получить анимацию одновременно, но тогда я теряю задержку в FadeIn. Некоторые эксперты jQuery могут помочь мне в том, что происходит не так.

Answer 1

Они асинхронны в исполнении. Вы должны вызвать следующую анимацию (по непрозрачности точно так же, как и использование fadeIn) в конце анимации предыдущего элемента.

Это поможет вам, я думаю,

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/