Queuing these events with jQuery
<p>I'm pulling my hair out trying to get this done!</p>

<p>I have a series of events that I want to call with jQuery. I want these events to happen sequentially (one after another).</p>

<p>I've tried using the .queue() function, but not getting where I want to be :(</p>

<p>I have a div called 'luckydip'.</p>

<p>On the click of a button (a.start), I want to set a loading image to #luckydip (I've been doing this with .css() up until now, and that seems to work ok). This image will stay in place for 10 seconds. The div (or image) then needs to fade out, and be replaced with a random image (I've done the work to get the random image) which needs to fade in. </p>

<p>The bits on their own are fine, but putting them in sequentially is causing me a headache!</p>

<p>HTML</p>

<pre><code>    &lt;a href="#" class="start"&gt;Spin the wheel!&lt;/a&gt;

&lt;div id="luckydip" style="width: 600px; height: 200px;"&gt;

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

<p>jQuery (the stuff I currently have which doesn't work sequentially)</p>

<pre><code>    var images = ['1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif','9.gif','10.gif','11.gif','12.gif','13.gif','14.gif','15.gif','16.gif','17.gif', '18.gif','19.gif','20.gif'];

    jQuery("a.start").click(function() {

        var COOKIE_NAME = 'lucykydip_cookie';
        jQuerygo = jQuery.cookie(COOKIE_NAME);

        if (!jQuerygo) {
        jQuery.cookie(COOKIE_NAME, 'ld_cookie');
                jQuery("a.start").hide();
        jQuery('#luckydip').css("background", "url(roulette-loader.gif) no-repeat");
        jQuery('#luckydip').delay(15500).fadeOut("2000").delay(1000);
        jQuery('#luckydip-voucher').show(1, function(){ jQuery(this).hide().html('&lt;img src="' + images[Math.floor(Math.random() * images.length)] + '" /&gt;').fadeIn(3000); })    
        }
        else { 
          jQuery("a.start").hide();
          jQuery('#luckydip').append('&lt;p&gt;&lt;strong&gt;Sorry, our records show that you have already received a voucher code!&lt;/strong&gt;&lt;/p&gt;');
        }
});
</code></pre>

<p>To be honest, its all a complete mess at the moment, as I'm sure you'll agree!</p>

<p>Thanks for any help guys.</p>
