jQuery 1.5.2 - действительно странное поведение с использованием функции click()

Question

Использование JQuery 1.5.2. Есть веб-сайт, который загружает начальную заставку, которая анимирует некоторые изображения логотипа. В скрипте есть функция click(), позволяющая пользователю пролистать анимацию и пропустить ее. На главной странице у меня есть два других элемента jquery - настраиваемый слайдер контента на основе Coda Slider 2.0 и слайд-шоу изображений.

Так что этот скрипт-заставка выполняет анимацию и, достигнув последней, запускает функцию щелчка, которая затухает на заставке, затухает в главном элементе содержимого и запускает слайд-шоу с изображениями и слайдер кода.

Теперь, если я позволю анимации воспроизводиться естественным образом и функция щелчка вызывается таким образом, все работает правильно. Тем не менее, если я нажму, чтобы пропустить анимацию, все становится смешным. Мой слайдер кодов начинает работать нормально, а затем через короткое время начинает пропускать слайды. Мое слайд-шоу изображений показывает только все остальные изображения. Как будто весь поток страницы облажался.

Если я переместлю свои триггеры для слайдера 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:

<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

Хорошо, после большого скрежета зубов и искажения кода, я наконец увидел, что происходит.

Когда пользователь щелкнул мышью, была запущена функция щелчка, которая запустила другие мои сценарии. Однако, когда анимация наконец закончилась, она вызывала щелчок во второй раз, снова вызывая сценарии и создавая беспорядок.

Я исправил это, добавив:

splashScreen.unbind('changeImage');

к началу метода щелчка. Это казалось проще, чем создавать логический тест, чтобы увидеть, был ли клик уже выполнен один раз. Кроме того, я полагаю, что я мог бы остановить анимацию от вызова click в конце, вместо того, чтобы повторять завершающее поведение минус триггеры скрипта, но эта строка показалась более эффективной. У кого-нибудь есть другие / лучшие способы исправить?