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

Posted 2023-05-08

【中文标题】jQuery 1.5.2 - 使用 click() 函数的非常奇怪的行为

【英文标题】：jQuery 1.5.2 - really weird behavior using click() function

【发布时间】：2011-07-31 19:09:41

【问题描述】：

使用 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>

【参考方案1】：

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

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

我通过添加来修复它：

splashScreen.unbind('changeImage');

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