Блог

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

Итак, этот скрипт splashscreen выполняет анимацию и, достигнув последней, запускает функцию click, которая гасит splashscreen, гаснет в разделе основного содержимого и запускает слайд-шоу моего изображения и слайдер coda.

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

Если я переместу свои триггеры для слайдера coda и слайд-шоу в index.html все работает независимо от того, разрешаю ли я воспроизведение анимации или щелкаю, чтобы пропустить ее. Однако, если я сделаю это, и пользователь позволит анимации воспроизводиться, слайд-шоу и слайдер coda будут на полпути к завершению цикла, когда появится главная страница. Я не хочу, чтобы они запускались до завершения слайд-шоу.

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

Приветствуются любые советы по устранению неполадок. До сих пор я пытался переместить триггеры coda и slideshow в разные места внутри функции 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>
  

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

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

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

 splashScreen.unbind('changeImage');
  

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