title: Issues with jQuery and IE
body: <p>I'm building a custom jQuery slideshow which effectively looks at each 'slide' and hides all 'frames' within it one at a time, and looks and the next slide, and unhides all the frames within that. Pretty simple.</p>
  
  <p>The slideshow works perfectly in Chrome and Firefox, but not in IE9 (haven't got as far as testing in IE8 or lower yet). In IE9, the script successfully hides the frames in the current slide, but does not unhide those in the next slide as it should.</p>
  
  <p>Javascript:</p>
  
  <pre><code>function slideshow(){
  
  var slides = $('.slide'); //all slides
  var delay = 8000; // 3s //delay between slides. must be at least 3 times speed
  var speed = 3500;
  var gap = 1000;
  
  //for each slide
  $.each(slides, function(index, value){ 
  
      //run animation function after each delay
      setTimeout(function(){
          changeSlides(index);
      }, delay + (delay * index));
  });
  
  function changeSlides(i){
      lastIndex = slides.length - 1;
      prevIndex = i-1;
      nextIndex = i+1;
  
      curSlide = slides[i];
      prevSlide = slides[prevIndex];
      nextSlide = slides[nextIndex];
      firstSlide = slides[0];
      lastSlide = slides[lastIndex];
  
      $(curSlide).removeClass("active-slide");
      removeFrames(curSlide);
  
      if (i == (lastIndex)){ // if last slide 
          $(firstSlide).addClass("active-slide");
          addFrames(firstSlide);
          slideshow();
      }else{
          $(nextSlide).addClass("active-slide");
          addFrames(nextSlide);
      }
  };
  
  function removeFrames(slide){
      remFrames = $(slide).find('.frame');
      console.log(remFrames); 
      $.each(remFrames, function(index, value){
  
          setTimeout(function(){
              frame = remFrames[index];
              $(frame).animate({"opacity" : 0}, speed);
  
          }, gap + (gap * index));
  
      });
  };
  
  function addFrames(slide){
      frames = $(slide).find('.frame');
  
      $.each(frames, function(index, value){
  
          setTimeout(function(){
              frame = frames[index];
              $(frame).animate({"opacity" : 1}, speed);
  
          }, gap + (gap * index));
  
      });
  };
  
  
  
  };
  
  slideshow();
  </code></pre>
  
  <p>In IE, <code>removeFrames</code> works without fault, but the <code>.find</code> in the <code>addFrames</code> seems to be failing to return any elements, therefore the <code>.each</code> sequence is not running. This problem doesn't occur in the <code>removeFrames</code> function, even though they're practically identical other than the <code>opacity</code> value.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="slideshow"&gt;
  &lt;!-- 1 --&gt;
  &lt;div class="slide v-pair active-slide"&gt;
      &lt;div class="grid-wrap"&gt;
              &lt;div class="grid-col col-one-half frame"&gt;
                  &lt;img src="assets/img/photos/ferme-fireplace.jpg" alt="La Ferme d'elise" /&gt;
              &lt;/div&gt;
              &lt;div class="grid-col col-one-half frame"&gt;
                  &lt;img src="assets/img/photos/ferme-ext.jpg" alt="La Ferme d'elise" /&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- 2 --&gt;
  &lt;div class="slide h-pair"&gt;
      &lt;div class="frame"&gt;
          &lt;img src="assets/img/photos/ferme-night.jpg" alt="La Ferme d'elise" class="h-image" /&gt;
      &lt;/div&gt;
      &lt;div class="frame"&gt;
          &lt;img src="assets/img/photos/ferme-group.jpg" alt="La Ferme d'elise" class=" frame" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- 3 --&gt;
  &lt;div class="slide full"&gt;
      &lt;div class="frame"&gt;
          &lt;img src="assets/img/photos/ferme-dining.jpg" alt="La Ferme d'elise" class="frame" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- 4 --&gt;
  &lt;div class="slide v-trio"&gt;
      &lt;div class="grid-wrap"&gt;
              &lt;div class="grid-col col-one-half frame"&gt;
                  &lt;img src="assets/img/photos/ferme-fireplace.jpg" alt="La Ferme d'elise" /&gt;
              &lt;/div&gt;
              &lt;div class="grid-col col-one-half frame"&gt;
                  &lt;div class="h-col"&gt;
                      &lt;img src="assets/img/photos/ferme-suite-alt.jpg" alt="La Ferme d'elise" /&gt;
                  &lt;/div&gt;
                  &lt;div class="h-col frame"&gt;
                      &lt;img src="assets/img/photos/ferme-lounge-alt.jpg" alt="La Ferme d'elise" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- 5 --&gt;
      &lt;div class="slide h-trio"&gt;
          &lt;img src="assets/img/photos/ferme-night.jpg" alt="La Ferme d'elise" class="h-image frame" /&gt;
          &lt;div class="grid-wrap"&gt;
              &lt;div class="grid-col col-one-half frame"&gt;
                  &lt;img src="assets/img/photos/ferme-lounge.jpg" alt="La Ferme d'elise" /&gt;
              &lt;/div&gt;
              &lt;div class="grid-col col-one-half frame"&gt;
                  &lt;img src="assets/img/photos/ferme-suite.jpg" alt="La Ferme d'elise" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If anyone could help or point me in the right direction to resolve this, it would be greatly appreciated!</p>