Использование JQuery 1.5.2.Есть веб-сайт, который загружает начальную заставку, которая анимирует некоторые изображения логотипа.В скрипте есть функция click (), позволяющая пользователю пролистать анимацию и пропустить ее.На главной странице у меня есть два других элемента jquery - настраиваемый слайдер контента, основанный на Coda Slider 2.0, и слайд-шоу изображений.
Так что этот скрипт-заставка выполняет анимацию и при достижении последнего запускаетФункция щелчка, которая затухает на заставке, исчезает в главном элементе содержимого и запускает слайд-шоу моих изображений и слайдер Coda.
Теперь, если я позволю анимации воспроизводиться естественным образом, а функция щелчка вызывается таким образом, всеработает правильно.Однако, если я нажимаю, чтобы пропустить анимацию, все становится смешным.Мой слайдер кодов начинает работать нормально, а затем через короткое время начинает пропускать слайды.Мое слайд-шоу изображений показывает только все остальные изображения.Как будто весь поток страницы облажался.
Если я переместлю свои триггеры для слайдера coda и слайд-шоу в 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 call:
<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>