jQuery 1.5.2 - 使用 click() 函数的非常奇怪的行为

Question

使用 JQuery 1.5.2。拥有一个加载初始启动画面的网站，该启动画面可以为一些 Logo 图像添加动画效果。该脚本有一个 click() 函数，允许用户单击并跳过动画。在主页上，我还有另外两个 jquery 元素 - 一个基于 Coda Slider 2.0 的自定义内容 slider 和一个图像幻灯片。

因此，这个启动屏幕脚本执行其动画，并在到达最后一个时触发单击功能，该功能会淡出启动屏幕，淡入主要内容 div，并触发我的图像幻灯片和尾声 slider 。

现在，如果我让动画自然播放并以这种方式调用单击函数，则一切正常。然而，如果我点击跳过动画，一切都会变得很有趣。我的尾声 slider 开始正常，然后不久之后开始跳过幻灯片。我的图像幻灯片仅显示所有其他图像。就像整个页面的流程都搞砸了。

如果我将尾声 slider 和幻灯片的触发器移至index.html，则无论我是让动画播放还是单击跳过动画，一切都会正常。但是，如果我这样做并且用户让动画播放，则当主页进入 View 时，幻灯片和尾声 slider 将完成其循环的一半。我不希望它们在幻灯片放映完成之前开始。

因此，从行为来看，我只能猜测，当单击跳过动画时，幻灯片脚本仍在后台运行，并且在完成时会导致一些问题。我的代码有明显的错误吗？我应该点击一下就杀死所有动画吗？

如有任何建议或故障排除提示，我们将不胜感激。到目前为止，我已经尝试将尾声和幻灯片触发器移动到单击功能中的不同位置，没有任何变化。下面是启动屏幕脚本和来自 index.html 的调用，如果您需要查看更多代码，请告诉我。

谢谢!!!

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 调用:

<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

好吧，经过一番咬牙切齿和修改代码后，我终于明白发生了什么。

当用户单击时，单击函数就会运行，从而触发我的其他脚本。然而，当动画最终完成时，它第二次调用 click，再次触发脚本，弄得一团糟。

我通过添加修复了它:

splashScreen.unbind('changeImage');

到 click 方法的开头。这似乎比创建逻辑测试来查看单击是否已经运行过一次更容易。另外，我想我可以停止动画在最后调用单击，而不是重复完成行为减去脚本触发器，但这一行似乎更有效。有人有其他/更好的方法来修复吗？