jQuery 1.5.2 - really weird behavior using click() function

Question

Using JQuery 1.5.2. Have a website that loads an initial splashscreen which animates some logo images. The script has a click() function to allow the user to click through and skip the animation. On the main page, I have two other jquery elements - a customized content slider based on Coda Slider 2.0, and a image slideshow.

So this splashscreen script does its animations, and upon reaching the last one, triggers the click function which fades out the splashscreen, fades in the main content div, and triggers my image slideshow and coda slider.

Now, if I let the animations play out naturally and the click function is called that way, everything works properly. However, if I click to skip the animations, everything gets FUNKY. My coda slider starts off normal and then short time later starts skipping slides. My image slideshow only shows every other image. It's like the whole flow of the page is screwed up.

If I move my triggers for the coda slider and the slideshow to the index.html, everything works regardless of whether I let the animation play or click through to skip it. However, if I do that and the user lets the animation play through, the slideshow and coda slider are halfway through their cycle when the main page comes into view. I don't want them to start until the slideshow is complete.

So, looking at the behavior, I can only guess that when clicking through to skip the animation, the slideshow script is still running in the background and it is causing some issue when it finishes. Is there something glaringly wrong with my code? Should I be killing all animations on a click?

Any advice or troubleshooting tips are appreciated. So far, I've tried moving the coda and slideshow triggers to different places within the click function with no change. Splashscreen script and call from index.html are below, let me know if you need to see more code.

Thanks!!!

splashScreen.js:

(function($){

    $.fn.splashScreen = function(settings){
        settings = $.extend({
            imageLayers: [],
            imageShowTime:700,
            preDelayTime: 2000
        },settings);

        var splashScreen = $('<div>',{
            id: 'splashScreen',
            css:{
                height: $(document).height()+100
            }
        });

        $('body').append(splashScreen);


        splashScreen.click(function(){
            splashScreen.fadeOut('slow',function() {
                $('#slideshow IMG.active').animate({opacity: 1.0}, 1000, function() {
                    setInterval( "slideSwitch()", 5000 );
                });
            $('#container').fadeIn('slow');
            });

            $('#coda-slider-1').codaSlider();
        });

        var imageDiv = $('<div>',{
            id: 'imageDiv'
        });

        splashScreen.append(imageDiv);

        var image = $("<img />")
            .attr("src","images/logo-her.gif?" + new Date().getTime());
        image.hide();

        image.load(function(){
            image.css({marginLeft: "-162px", float: "left"});
        });

        imageDiv.append(image);

        splashScreen.bind('changeImage',function(e,newID){
            if (settings.imageLayers[newID] || newID == 3){
                showImage(newID);
            } else {
                splashScreen.click();
            }
        });

        splashScreen.trigger('changeImage',0);

        function showImage(id) {
            if (id <= 2) {
                var image2 = $("<img />")
                    .attr("src",settings.imageLayers[id] + "?" + new Date().getTime());
                image2.hide();
                image2.load(function(){
                    image2.css({marginRight: "-467px", float: "right"});
                    image.delay(settings.preDelayTime).show().animate({marginLeft: "246px"}, 600).delay(settings.imageShowTime).fadeOut(600,function(){
                        image.css({marginLeft: "-162px"});
                    });
                    image2.delay(settings.preDelayTime).show().animate({marginRight: "246px"}, 600).delay(settings.imageShowTime).fadeOut('slow',function(){
                        image2.remove();  
                        splashScreen.trigger('changeImage',[id+1]);  
                    });
                });

                imageDiv.append(image2);
            } else {
                image.remove();
                var imageLogo = $("<img />")
                    .attr("src","images/logo-final.gif?" + new Date().getTime());
                imageLogo.hide();
                imageLogo.load(function(){
                    imageLogo.css({margin: "0 auto", clear: "both"});
                    imageLogo.delay(settings.preDelayTime).fadeIn(600).delay(settings.imageShowTime).fadeOut(600,function(){
                        imageLogo.remove();
                        splashScreen.trigger('changeImage',[id+1]);  
                    });
                });

                imageDiv.append(imageLogo);
            }
        }
        return this;
    }
})(jQuery);

index.html call:

<script type="text/javascript" src="scripts/jquery-1.5.2.js"></script>
<script type="text/javascript" src="scripts/splashScreen.js"></script>
<script type="text/javascript" src="scripts/slideSwitch.js"></script>
<script type="text/javascript" src="scripts/jquery.coda-slider-2.0.js"></script>

<script type="text/javascript">
$(document).ready(function(){
     $('#logo').splashScreen({
          imageLayers : [
               'images/logo-01.gif',
           'images/logo-02.gif',
           'images/logo-03.gif'
          ]
     });
});
</script>

Answer 1

OK, after much gnashing of teeth and mangling of code, I finally saw what was happening.

When a user clicked, the click function was run, triggering my other scripts. However, when the animation finally finished, it was calling click a second time, triggering the scripts again and making a mess of things.

I fixed it by adding:

splashScreen.unbind('changeImage');

to the beginning of the click method. This seemed easier than creating a logic test to see if click had been run once already. Also, I suppose I could've stopped the animation from calling click at the end, instead repeating the finishing behavior minus the script triggers, but this one line seemed more efficient. Anyone have any other/better ways to fix?