title: jQuery animations mess up in IE8 and earlier
body: <p>Here is my site: 
  <a href="http://smartpeopletalkfast.co.uk/jquery/basicDemo12-bugfix-3.htm" rel="nofollow">http://smartpeopletalkfast.co.uk/jquery/basicDemo12-bugfix-3.htm</a></p>
  
  <p>It works fine on firefox, chrome, safari and ie9, but messes up in IE8 and 7. </p>
  
  <p>When you click on an image it expands. When you click on another image, any expanded images contract. I think its this second part of the jQuery causing problems. With IE8 and 7 the animation end up in the correct place, but all the images jump around before then. </p>
  
  <p>Here is the code:</p>
  
  <pre><code>    $(".image-div").click(function () {
  
  
          var divRefTwo = $(".image-div").not(this);
          $(".image-div").not(this).animate({
                  width: '250px',
                  left: '0px',
                  marginRight: '0px',
                  backgroundPosition: '-125px'
              }, 400, function() {
                  $(divRefTwo).css('z-index','1');
              });
  
          if ($(this).css('z-index') == 1) {
              $(this).css('z-index','2');
              $(this).animate({
                  width: '500px',
                  left: '-125px',
                  marginRight: '-250px',
                  backgroundPosition: '0px'
              }, 500, function() {
                  //
              });
          }
          else {
              var divRef = this;
              $(this).animate({
                  width: '250px',
                  left: '0px',
                  marginRight: '0px',
                  backgroundPosition: '-125px'
              }, 500, function() {
                  $(divRef).css('z-index','1');
              });
          }
  
      });
  </code></pre>
  
  <p>Does anyone have any ideas why this is happening? Its quite hard to debug as the issue only presents itself while the animation is running.</p>
  
  <p>Thanks</p>
  
  <p>UPDATE- Ive tried adding conditional statements to only run the animation (that shrinks expanded elements) when necessary, but with this it doesn't run at all: </p>
  
  <pre><code>        if ($(".image-div").not(this).css('width') == '500px') {
  
          $(".image-div").not(this).animate({
                  width: '250px',
                  left: '0px',
                  marginRight: '0px',
                  backgroundPosition: '-125px'
              }, 400, function() {
                  $(divRefTwo).css('z-index','1');
              });
  
          }
  
          else {
          }
  </code></pre>
  
  <p>UPDATE2 - Ive updated the latest demo here: 
  <a href="http://smartpeopletalkfast.co.uk/jquery2/basicDemo12-bugfix-6.htm" rel="nofollow">http://smartpeopletalkfast.co.uk/jquery2/basicDemo12-bugfix-6.htm</a></p>
  
  <p>The conditional statements prevent the animation from running on divs that aren't supposed to expand anyway. So this has fixed the problem of all the divs jumping about. </p>
  
  <p>However when the animation runs on the clicked on div (like its supposed to), that div still expands weirdly on IE7 and 8. It seems like this is to do with the background-position animating weirdly. </p>