title: Two consecutive Animation will not run in jQuery
body: <p>please see this script:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      .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;
      }
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
      $(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++;
          }
      });
  &lt;/script&gt;
  &lt;body&gt;
  &lt;div&gt;
      &lt;div class="div1 My" id="div1"&gt;
      &lt;/div&gt;
      &lt;div class="div2 My" id="div2"&gt;
      &lt;/div&gt;
      &lt;div class="div3 My" id="div3"&gt;
      &lt;/div&gt;
      &lt;div class="div4 My" id="div4"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I want every 5 second my div become large and then become normal and next div become large.The problem is first animation does not run and just second animation run.Where is the problem?</p>
  
  <p><a href="http://jsfiddle.net/ExAw8/" rel="nofollow">JSFiddle Sample</a></p>
  
  <p><strong>Edit 1)</strong></p>
  
  <p>I want when next div become large previous div become normal concurrently.Not previous become normal and then next become large </p>