Последовательная анимация

02.11.2013, 22:10. **Показов** 4533. **Ответов** 2

Author24 — интернет-сервис помощи студентам

Здравствуйте коллеги. Никак не могу реализовать выполнение анимации на jQuery последовательно. Есть 5 блоков (box1, box2, box3, box4 и box5) Нужно чтобы после анимации 4-х блоков, запустилась анимация 5-го блока. Проблема в том, что все 5 блоков выполняют свою анимацию параллельно(сразу все). Просьба помочь, может кто сталкивался..

Javascript

$(document).ready(function(){
 
 
$(".run1").click(function(){
 
$("#box1").animate({opacity: "0.1" , height: "20", width: "20" , left: "+=600"}, 600)
.animate({opacity: "0.4", top: "+=60", height: "20", width: "20"}, "slow", 600)
.animate({opacity: "1", left: "600", height: "300", width: "270"}, "slow")
.animate({top: "100"}, "fast")
.animate({height: 'hide'}, 100);
 
$("#box2").animate({opacity: "0.1" , height: "20", width: "20" }, 300)
.animate({opacity: "1", height: "300", width: "270"}, "slow")
.animate({height: 'hide'}, 100);
 
$("#box3").animate({opacity: "0.1" , height: "20", width: "20" }, 600)
.animate({opacity: "1", height: "300", width: "270"}, "slow")
.animate({height: 'hide'}, 100);
 
$("#box4").animate({opacity: "0.1" , height: "20", width: "20" }, 600)
.animate({opacity: "1", height: "300", width: "270"}, "slow")
.animate({height: 'hide'}, 100);
 
$("#box5")
.animate({height: 'show'}, 300);
});

@Soldado · 03.11.2013, 00:02

В анимации помимо css свойства и времени указывается (может) ещё и функция, которая выполняется после анимации вот в эту функцию и помещайте следующую анимацию
Например так:

HTML5

<html>
  <head>
    <title>Образец</title>
    
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />    
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    
 <script type="text/javascript">
$(document).ready(function(){
 $("#box1").animate({'width':'600px'}, 2000,function(){
                $("#box2").animate({'width':'600px'}, 2000,function(){
                        $("#box3").animate({'width':'600px'}, 2000,function(){  
                            $("#box4").animate({'width':'600px'}, 2000,function(){  
                                $("#box5").animate({'width':'600px'}, 2000,function(){  
                    
}); }); }); }); });                  
 });/*end  ready*/
 </script>
<style>
#boxBlock div{
width:60px;
height:50px;
margin-top:4px;
background:#c4fdc7;
border: 2px solid #2f7807
}
 
 
</style>    
  </head>
  <body style="padding-left:140px;">
    <div id="boxBlock">
            <div id="box1"></div>
            <div id="box2"></div>
            <div id="box3"></div>
            <div id="box4"></div>
            <div id="box5"></div>
    </div>
    
  </body>
</html>

@Web_Master · 03.11.2013, 00:50

решение в лоб ))

Javascript

$(document).ready(function(){
 
 
 $(".run1").click(function(){
 
 $("#box1").animate({opacity: "0.1" , height: "20", width: "20" , left: "+=600"}, 600)
 .animate({opacity: "0.4", top: "+=60", height: "20", width: "20"}, "slow", 600)
 .animate({opacity: "1", left: "600", height: "300", width: "270"}, "slow")
 .animate({top: "100"}, "fast")
 .animate({height: 'hide'}, 100);
 
 $("#box2").animate({opacity: "0.1" , height: "20", width: "20" }, 300)
 .animate({opacity: "1", height: "300", width: "270"}, "slow")
 .animate({height: 'hide'}, 100);
 
 $("#box3").animate({opacity: "0.1" , height: "20", width: "20" }, 600)
 .animate({opacity: "1", height: "300", width: "270"}, "slow")
 .animate({height: 'hide'}, 100);
 
 $("#box4").animate({opacity: "0.1" , height: "20", width: "20" }, 600)
 .animate({opacity: "1", height: "300", width: "270"}, "slow")
 .animate({height: 'hide'}, 100);
 
 
setTimeout(function() {
    $("#box5").animate({height: '100', width: "270"}, 300);
}, 1300);
 
 
 
 });
 
 
});

	03.11.2013, 00:50