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