title: JQuery .next() function getting all the next elements not one
body: <p>I have built a JQuery CSS3 image gallery. The problem is that the next function in the code below is not working problem.</p>
  
  <pre><code>function gallery() {
  
          var islide = $('.cornerimg:visible');
          $(islide).removeClass('cornerimgfocus');
          $(islide).next().addClass('cornerimgfocus');
          setTimeout(function() {
              gallery()
          },4000);
  }
  $(window).load(function() {
      $( '.cornerimg' ).first().addClass('cornerimgfocus');
      setTimeout(function() {
              gallery()
          },4000);
  });
  </code></pre>
  
  <p>The next function is operating on all the next elements not just the next one. The result being that all elements that follow the first one with class .cornerimg are becoming visible at once.</p>
  
  <p>HTML </p>
  
  <pre><code>&lt;div class="imageitem"&gt;    
      &lt;div class="cornerimg" style="background-image:url(http://www.golfbrowser.com/wp-content/uploads/2011/05/DSC00764s-968x400.jpg);"&gt;&lt;/div&gt;
      &lt;div class="cornerimg" style="background-image:url(http://www.golfbrowser.com/wp-content/uploads/2011/05/DSC00762s-968x400.jpg);"&gt;&lt;/div&gt;
      &lt;div class="cornerimg" style="background-image:url(http://www.golfbrowser.com/wp-content/uploads/2011/05/DSC00759s-968x400.jpg);"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any ideas?</p>
  
  <p>Marvellous</p>