title: jquery .slideUp acting strange when invoked more than once
body: <p>EDIT : would help if my  tags were closed...no improvement alas.</p>
  
  <p>What I'm trying to build is relatively simple. A slot machine-like interface with "rolling" images that eventually will slow down and stop. I'm using jQuery's .slideUp() function to do so, and it works well when applied to a single panel. But when applied to a second or third, the animation start acting weird.</p>
  
  <p>Try this demo to see what I mean : <a href="http://bit.ly/wtiq36" rel="nofollow">http://bit.ly/wtiq36</a></p>
  
  <p>Anyone know what's going on? The technique I'm using to simulate the animation is pretty straightforward, I just pile all the images onto the other, and swap the highest z-index for the lowest z-index-1 to put it back at the end of the stack once the slideUp() is finished.</p>
  
  <p>(p.s. I am aware this loops infinitely, that part is not done yet :))</p>
  
  <p>Here's the important code (html &amp; js), or just check the source on that link for everything.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="panel one"&gt;
          &lt;ul&gt;
              &lt;li class="item" style="z-index:1"&gt;&lt;img src="images/img1.jpg" /&gt;&lt;/li&gt;
              &lt;li class="item" style="z-index:2"&gt;&lt;img src="images/img2.jpg" /&gt;&lt;/li&gt;
              &lt;li class="item" style="z-index:3"&gt;&lt;img src="images/img3.jpg" /&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class="panel two"&gt;
          &lt;ul&gt;
              &lt;li class="item" style="z-index:1"&gt;&lt;img src="images/img1.jpg" /&gt;&lt;/li&gt;
              &lt;li class="item" style="z-index:2"&gt;&lt;img src="images/img2.jpg" /&gt;&lt;/li&gt;
              &lt;li class="item" style="z-index:3"&gt;&lt;img src="images/img3.jpg" /&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class="panel three"&gt;
          &lt;ul&gt;
              &lt;li class="item" style="z-index:1"&gt;&lt;img src="images/img1.jpg" /&gt;&lt;/li&gt;
              &lt;li class="item" style="z-index:2"&gt;&lt;img src="images/img2.jpg" /&gt;&lt;/li&gt;
              &lt;li class="item" style="z-index:3"&gt;&lt;img src="images/img3.jpg" /&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And JS</p>
  
  <pre><code>function testit(n){
      $(".panel."+n).each(function() {
          secondclass = $(this).attr('class').split(' ')[1]
          div = ("."+secondclass+" ul li")
          if(secondclass != "stats"){
              flip(div)
          }
      })
  }
  function flip(div){
      highest = gethighZ(div)[1]
      highest.slideUp(400,'linear',function(){
          lowestZ = getlowZ(div)[0]
          highest.css("z-index",lowestZ-1)
          highest.show()
          flip(div)
      })
  }
  
  
  //these 2 functions just return highest/lowest zindex divs
  function gethighZ(div){
      var index = -999999999999
      var result = Array()
      $(div).each(function() {
          var current = parseInt($(this).css("zIndex"), 10)
          if(current &gt; index) {
              result[0] = current
              result[1] = $(this)
              index = current
          }
  
      });
      return result
  }
  
  function getlowZ(div){
      var index = 99999999999999
      var result = Array()
      $(div).each(function() {
          var current = parseInt($(this).css("zIndex"), 10)
          if(current &lt; index) {
              result[0] = current
              result[1] = $(this)
              index = current
          }
  
      });
      return result
  }
  </code></pre>