I'm getting a really buggy and jittery slideshow
<p>html:</p>

<pre><code>&lt;div id="model_bg"&gt;
    &lt;div id="model_slideshow"&gt;
    &lt;img id="default_image" src="../images/community_default_2.jpg" alt="" class="active"/&gt;
    &lt;img id="one_image" src="../images/one.jpg" alt=""/&gt;
    &lt;img id="two_image" src="../images/two.jpg" alt=""/&gt;
    &lt;img id="three_image" src="../images/three.jpg" alt=""/&gt;
    &lt;img id="four_image" src="../images/four.jpg" alt=""/&gt;
    &lt;img id="five_image" src="../images/five.jpg" alt=""/&gt;

    &lt;/div&gt;
</code></pre>

<p>css:</p>

<pre><code>#model_slideshow{
position:relative;
height:292px;
width:944px;
z-index:0;
margin-bottom: 5px;

}

#model_slideshow IMG{
    position:absolute;
    top:0px;
    left:0px;
    z-index:8;
    opacity:0.0;
}


#model_slideshow IMG.active{

z-index:10;
opacity:1.0;

}


#model_slideshow IMG.last-active{

z-index:9;

}
</code></pre>

<p>javascript:</p>

<pre><code>$(document).ready(function () { 

$("#one_btn").mouseover(function(){

var $active = $('#model_slideshow IMG.active');

var $next = $('#model_slideshow IMG#one_image');

if($next.is('.active') == false){
$active.addClass('last-active');

        $next.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, 100, function(){  $active.removeClass('active last-active');    });
}

});

$("#one_btn").mouseout(function(){

var $active = $('#model_slideshow IMG.active');

var $next = $('#model_slideshow IMG#default_image');

if($next.is('.active') == false){
$active.addClass('last-active');

        $next.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, 100, function(){  $active.removeClass('active last-active');    });
}

});

$("#two_btn").mouseover(function(){


var $active = $('#model_slideshow IMG.active');

var $next = $('#model_slideshow IMG#two_image');
if($next.is('.active') == false){

$active.addClass('last-active');

        $next.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, 100, function(){  $active.removeClass('active last-active');    });

}

});

$("#two_btn").mouseout(function(){

var $active = $('#model_slideshow IMG.active');

var $next = $('#model_slideshow IMG#default_image');

if($next.is('.active') == false){
$active.addClass('last-active');

        $next.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, 100, function(){  $active.removeClass('active last-active');    });
}

});
</code></pre>

<p>I have this slideshow I modified to basically switch on a button rollover. However, it's really buggy when the user switch quickly between different "slides" by rolling over the other buttons. It must have something to do with the opacity animation and the active classes not switch in time etc...</p>

<p>So the problems are it's jittery and sometimes gets stuck on an image and doesnt go back to the default image. </p>

<p>Is there an easier way to achieve this? Perhaps something that says wait until the opacity is done animating then go to whatever image that is currently rolled over?</p>

<p><a href="http://jsfiddle.net/mattball/m3mhR/" rel="nofollow">Here's a demo</a>. <em>[Demo updated, sorry - M.B.]</em></p>
