зацикленный каскад $(").show() стопорится на середине второго цикла!

0

1

ку! в общем, чёт я не понял, даже срабатывало. все знаки проверил, может знаете какой каменб подводный, анимация срабатывает до середины второго цикла, т.е. когда объекты вновь все получают display:block

сейчас переключил кладку - сработало! и опять встало! втф. вот код, всё просто, 2 группы по 3 объекта, каждый имеет один из трёх классов, все display:noe? по сценарию получают по очереди display:block потом опять none и так далее. пожалуйста, подскажите что не так.

UPDT Запостил и продолжил эксперементировать, убрал делеи, всё поставил поровну, и в результате он по третьему кругу отрабатывает
$('.arrowItem1').hide(1000,function(){
и всё

<!DOCTYPE html>
<html>
<head>
	<title>arrowsTest</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
</head>
<body>
<div id="cont" style="width:95vw;height: 89vh;margin:0 auto;background-color: rgb(60,60,60);">
<svg
   viewBox="0 0 744.09448819 1052.3622047"
   width="100%"
   height="100%">
<style type="text/css">
.arrowItem1,.arrowItem2,.arrowItem3 {
	display: none;
	fill:#aac800;
	fill-opacity:1;
	fill-rule:evenodd;
	stroke:none;
	stroke-width:1px;
	stroke-linecap:butt;
	stroke-linejoin:miter;
	stroke-opacity:1;
}
</style>
  <g
     id="arrowBottom">
    <path
      	class="arrowItem3 "
       	d="m 157.42265,302.5164 -56.25,37.39401 -56.24999,-37.39401 0,12.46468 56.42858,37.394 56.07141,-37.27529 z"/>
    <path
       	class="arrowItem2"
       	d="m 157.42265,277.72474 -56.25,37.39402 -56.24999,-37.39402 0,12.46467 56.42858,37.394 56.07141,-37.27528 z"/>
    <path
    	class="arrowItem1"
       	d="m 157.42265,252.7954 -56.25,37.39401 -56.24999,-37.39401 0,12.46467 56.42858,37.39401 56.07141,-37.27529 z"/>
  </g>
  <g
     id="arrowTop">
    <path
    	class="arrowItem3"
       	d="m 382.28261,302.65408 -56.25,-37.39401 -56.24999,37.39401 0,-12.46468 56.42858,-37.394 56.07141,37.27529 z"/>
    <path
    	class="arrowItem2"
       	d="m 382.28261,327.44574 -56.25,-37.39402 -56.24999,37.39402 0,-12.46467 56.42858,-37.394 56.07141,37.27528 z"/>
    <path
    	class="arrowItem1"
       	d="m 382.28261,352.37508 -56.25,-37.39401 -56.24999,37.39401 0,-12.46467 56.42858,-37.39401 56.07141,37.27529 z"/>
  </g>
</svg>
</div>
<script type="text/javascript">
$(document).ready(function arrowLoop() {	
		$('.arrowItem1').show(1000,
			function(){
				$('.arrowItem2').show(1000,
					function(){
						$('.arrowItem3').show(1000,
							function(){
								$('.arrowItem1').hide(1000,
									function(){
										$('.arrowItem2').hide(1000,
											function(){
												$('.arrowItem3').hide(1000, arrowLoop());

											});
									});
							});
					});
			});
});
</script>
</body>
</html>

Ссылка

Похожие темы