2

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

所以这个闪屏脚本会做它的动画，当到达最后一个时，触发点击功能，它会淡出闪屏，淡入主要内容 div，并触发我的图像幻灯片和结尾滑块。

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

如果我将 coda 滑块和幻灯片的触发器移动到 index.html，无论我是让动画播放还是单击以跳过它，一切都会正常工作。但是，如果我这样做并且用户让动画播放，那么当主页面进入视图时，幻灯片和尾声滑块将在其周期中进行。我不希望他们在幻灯片完成之前开始。

所以，看看行为，我只能猜测当点击跳过动画时，幻灯片脚本仍在后台运行，它在完成时会引起一些问题。我的代码有什么明显的问题吗？我应该单击一下就杀死所有动画吗？

任何建议或故障排除技巧表示赞赏。到目前为止，我已经尝试将尾声和幻灯片触发器移动到 click 函数中的不同位置，而没有任何变化。下面是启动画面脚本和来自 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>
4

1 回答 1

0

好的，经过多次咬牙切齿和代码混乱，我终于看到了发生了什么。

当用户点击时，点击功能运行，触发我的其他脚本。然而动画终于完成的时候，又是第二次调用click，又触发了脚本，搞得一团糟。

我通过添加来修复它：

splashScreen.unbind('changeImage');

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

于 2011-04-07T16:54:21.570 回答