title: jquery animate doesn't work in IE9 and older
body: <p>I have problem with jquery animation. It's not working in IE9 and older. I think problem is somewhere with css because as I can see in a ie there is opacity set to 0. </p>
  
  <h2>Javascript</h2>
  
  <pre><code>var $lead = $('.lead');
  var height = $lead.height();
  var totalHeight = height * numOfLeads;
  function bounce() {
      var time = 400;
      var counter1 = 1;
      $($(".lead").get().reverse()).each(function() {
          setTimeout(function(el, counter1, height, totalHeight) {
              $(el).css({
                  top: "-" + (totalHeight - (counter1 * height) + height) + "px",
                  opacity: 0,
                  display: "block",
                  position: "relative"
              }).animate({
                  top: "+=" + (totalHeight - (counter1 * height) + height) + "px",
                  opacity: 1
              }, 1000, "easeOutBounce")
                      ;
          }, time, this, counter1, height, totalHeight);
          time += 400;
          counter1 += 1;
      });
  }
  bounce();
  </code></pre>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div class="lead"&gt;
  &lt;div class="progress-bar"&gt;
      &lt;div&gt;
          &lt;span class="first green end"&gt;&lt;/span&gt;
          &lt;span class="middle"&gt;&lt;/span&gt;
          &lt;span class="middle"&gt;&lt;/span&gt;
          &lt;span class="last"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;span&gt;Accepted&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="product"&gt;Hypotek&lt;/div&gt;
  &lt;div class="county"&gt;Ustecky&lt;/div&gt;
  &lt;div class="change"&gt;
      &lt;span&gt;Changed&lt;/span&gt;
      &lt;div&gt;22&lt;/div&gt;
      &lt;div&gt;29&lt;/div&gt;
      &lt;div&gt;38&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <h2>CSS</h2>
  
  <pre><code>#leads{position: absolute;}
  #leads, #leads div { z-index: 5;}
  .lead { background: url("../images/lead_back_stripe.png") repeat-x scroll 0 0 transparent; height: 65px;}
  .lead &gt; div { float: left; padding-left: 20px; padding-top: 21px; width: 180px;}
  .lead &gt; div.progress-bar{width: 185px;}
  .lead &gt; div.product {width: 175px;}
  </code></pre>
  
  <p>You can see the whole thing <a href="http://honzuvklient.chytryhonza.cz/" rel="nofollow">here</a></p>
  
  <p><strong>Does anybody know where the problem is?</strong></p>