setInterval is working once in Chrome but fine in other browsers
<p>I have the following slideshow code:</p>

<p><strong>HTML</strong></p>

<pre class="lang-html prettyprint-override"><code>&lt;div id="slideshow"&gt;&lt;img src="common/images/background/Slide1b.jpg" /&gt;
   &lt;img src="common/images/background/Slide2b.jpg" /&gt;
   &lt;img src="common/images/background/Slide3b.jpg" /&gt;
   &lt;img src="common/images/background/Slide4b.jpg" /&gt;
&lt;/div&gt;
</code></pre>

<p><strong>jQuery</strong></p>

<pre class="lang-js prettyprint-override"><code>var opt1 = 1;
$(document).ready(function() {

    $('#slideshow').supersize();
    all_images = $('#slideshow &gt; img');
    all_images.hide();

    first = $('#slideshow &gt; img:eq(0)');
    first.show().attr('class', 'power');

    setInterval(function() { 
        var total = $('#slideshow &gt; img').length;

            if(opt1 &lt; total) {
                var current = $('.power');
                var next = $('.power').next();              

                current.removeClass('power').fadeOut('slow');
                next.fadeIn('slow').addClass('power');

                ++opt1;
            } else {
                opt1 = 1;
                all_images.removeClass('power').fadeOut('slow');
                first.addClass('power').fadeIn('slow');             
            }
    }, 2000);       

});
</code></pre>

<p>It is working fine in all other browsers except in Google Chrome it fires only once.</p>
