Question

使用JQuery 1.5.2。有一个网站加载一个初始的闪屏，动画一些徽标图像。该脚本具有click（）函数，允许用户单击并跳过动画。在主页面上，我还有另外两个jquery元素 - 基于Coda Slider 2.0的自定义内容滑块和图像幻灯片。

所以这个启动画面脚本会动画，并在到达最后一个时触发点击功能，淡出启动画面，淡入主内容div，并触发我的图像幻灯片和尾声滑块。

现在，如果我让动画自然地播出并且以这种方式调用click函数，那么一切正常。但是，如果我点击跳过动画，一切都会变得有趣。我的尾声滑块开始正常，然后很短的时间后开始跳过幻灯片。我的图片幻灯片只显示其他所有图片。这就像整个页面的流程被搞砸了一样。

如果我将触发器滑块和幻灯片的触发器移动到index.html，无论我是播放动画还是单击以跳过动画，一切都有效。但是，如果我这样做并且用户允许动画播放，则当主页面进入视图时，幻灯片和coda滑块位于其循环的中间。我不希望它们在幻灯片完成之前启动。

所以，看一下这个行为，我只能猜测，当点击跳过动画时，幻灯片显示脚本仍然在后台运行，并在完成时导致一些问题。我的代码有什么明显的错误吗？我应该在点击时杀死所有动画吗？

任何建议或疑难解答提示表示赞赏。到目前为止，我已经尝试将尾声和幻灯片触发器移动到点击功能中的不同位置而没有任何变化。下面是Splashscreen脚本和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功能，触发了我的其他脚本。然而，当动画终于完成时，它再次调用click，再次触发脚本并弄乱了一些东西。

我通过添加：

来修复它

splashScreen.unbind('changeImage');

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

jQuery 1.5.2 - 使用click（）函数的奇怪行为

1 个答案: