Two consecutive animations will not start in jQuery
see this script:
<style type="text/css"> .div1 { background-color: Aqua; width: 400px; height: 30px; } .div2 { background-color: Fuchsia; width: 400px; height: 30px; } .div3 { background-color: Green; width: 400px; height: 30px; } .div4 { background-color: Orange; width: 400px; height: 30px; } </style> <script type="text/javascript"> $(document).ready(function () { var timer = setInterval(showDiv, 2000); var counter = 0; function showDiv() { if (counter == 0) { counter++; return; } $('div.My').css('height', '30px'); $('div.My').animate({ height: '30' }, 2000, function () { alert('i'); }); $('div.My') .stop() .filter(function () { return this.id.match('div' + counter); }) .animate({ height: '50' }, 500, function () { }); counter == 4 ? counter = 0 : counter++; } }); </script> <body> <div> <div class="div1 My" id="div1"> </div> <div class="div2 My" id="div2"> </div> <div class="div3 My" id="div3"> </div> <div class="div4 My" id="div4"> </div> </div> </body> I want every 5 seconds my div to become big and then to become normal and the next div to become big. The problem is that the first animation does not start and only the second animation starts. What is the problem?
Change 1)
I want when the next div becomes big, the previous div becomes normal at the same time. Not the previous one becomes normal and then becomes large
Mark my plug of your violin and let me know if that does what you want. You had a .stop() call in the middle that blocked the slow cut animation.
Now the full script:
$(document).ready(function () { var timer = setInterval(showDiv, 2000); var counter = 0; function showDiv() { if (counter == 0) { counter++; return; } $('div.My').animate({ height: '30px' }, { duration: 500, queue: false }); $('div.My') .filter(function () { return this.id.match('div' + counter); }) .animate({ height: '50px' }, { duration: 500, queue: false }); counter == 4 ? counter = 0 : counter++; } }); Edit - New Violin
I didn’t feel good about the above code, and it didn’t work properly in my browser, so I found another approach which, in my opinion, works more cleanly. In this case, the jQuery step option is used. I also use addClass and removeClass as a kind of local storage to remember which div needs to be reduced in the next animation. You can do some math with counter and get the same result, but it works.
$(document).ready(function () { var timer = setInterval(showDiv, 2000); var counter = 0; function showDiv() { if (counter == 0) { counter++; return; } $shrinker = $("div.big").removeClass("big"); $grower = $("#div"+counter); $grower .animate({ height:50 }, {duration:500, step: function(now, fx) { $shrinker.css("height", 80-now); } } ); $grower.addClass("big"); counter == 4 ? counter = 0 : counter++; } }); The body of step looks a bit strange, but ensures that at every moment of the animation, the overall height of the div stack remains constant. In general, the overall height of the shrinking and growing divs (min: 30, max: 50) should be 80 at any time, so the height of the shrinking div should be 80 - the height of the growing div.