jQuery исчезает и работает неправильно в Google Chrome

Question

У меня проблема с простым слайд-шоу, которое я сделал с помощью jQuery. Скрипт отлично работает во всех других браузерах, кроме Google Chrome. Вы можете найти живой сайт здесь

Есть две вещи не так:

1. Авто-слайд запускается, но останавливается после второго слайда.
2. Если щелкнуть по индикаторам слайдов (....), иногда появляется фоновое изображение этого слайда (которое применяется с помощью CSS), а иногда оно остается скрытым.

Вдобавок ко всему, я получаю эту ошибку:

event.layerX и event.layerY повреждены и устарели в WebKit. Они будут сняты с двигателя в ближайшее время.

Вот JavaScript, который я использую:

function nextSlide() {
    var visibleSlide = $('#slider li:visible');
    var currentSlide = $(visibleSlide).index() + 1;
    var slideCount = $('#slider li').size();
    var nextSlide = (currentSlide == slideCount) ? 1 : currentSlide + 1;

    $('#slider_indicator a').removeClass('active');
    $(visibleSlide).fadeOut('fast', function() {
        $('#slider li:nth-child(' + nextSlide + ')').fadeIn('fast');
        $('#slider_indicator  li:nth-child(' + nextSlide + ') a').addClass('active');
    });
}

autoslide = setTimeout("nextSlide()", 6000);

$(function() {
    $('#slider_indicator a').bind('click', function(e) {
        clearTimeout(autoslide);
        $('#slider_indicator a').removeClass('active');
        $(this).addClass('active');
        var slide_number = $(this).parent().index() + 1;
        $('#slider li:visible').fadeOut('fast', function() {
            $('#slider li:nth-child(' + slide_number + ')').fadeIn('fast');
        });
        e.preventDefault();
    })
    $('#selection .scrollable .items a').live('click', function(e) {
        var self = $(this);
        $.ajax({
            url: $(self).attr('href'),
            type: 'GET',
            success: function(body) {
                var count = $('#selection .scrollable .items a').length - 1;
                count = (count == 1) ? count + ' Ribbon' : count + ' Ribbons';
                $(self).parent('li').fadeOut('fast', function() {
                    $('#result li a[rel="' + $(self).attr('rel') + '"]').removeClass('added');
                    $(this).remove();
                    $('#selection #header #count').text(count);
                })
            }
        })
        e.preventDefault();
    })
})​

Любая помощь очень ценится.

Answer 1

Я пытаюсь понять, что не так и почему это не работает, но:

var currentSlide = $(visibleSlide).index() + 1;

Вам не нужно переносить visibleSlide в jQuery, поскольку это уже объект jQuery.

slideCount = $('#slider li').size();

Обычно length используется в этой ситуации вместо size().

var nextSlide = (currentSlide == slideCount) ? 1 : currentSlide + 1;

Не пробовал, это может сработать, но я думаю, что это, вероятно, не будет хорошим решением на будущее.

$('#slider_indicator  li:nth-child(' + nextSlide + ') a').addClass('active');

Это выглядит странно, пропущена ли кавычка или слишком много пустого пространства, не знаю, похоже, это не сработает, но я могу ошибаться. Может быть, отсюда ваша проблема.

autoslide = setTimeout("nextSlide()", 6000);

Я думаю, что вы пропали val прямо там.

$('#selection .scrollable .items a').live('click', function (e)

Вам нужны все эти селекторы? Кроме того, я думаю, что live() устарела в пользу on().

var count = $('#selection .scrollable .items a').length - 1;
count = (count == 1) ? count + ' Ribbon' : count + ' Ribbons';

Это просто дает мне такое же чувство, что иногда это может работать. Я не понимаю, почему вы определяете count, а затем переопределяете его странной троичной операцией. Я чувствую, что мог бы быть лучший способ сделать это.

Answer 2

Как я ответил в своем комментарии, это работает сейчас, но в событии щелчка это не работает, поэтому вы можете просто использовать

$('#slider_indicator a').bind('click', function(e){
    clearInterval(autoslide);
    autoslide=setInterval("nextslide", 6000);
});

Но для установки текущего индекса вы можете использовать переменную nextslide.

Answer 3

Я не вижу, чтобы вы где-то заявляли var autoslide.

И я думаю, что вы хотите setInterval, а не setTimeout

Answer 4

Не имеет опыта в jQuery, но я думаю, что ваша проблема возникает в этой строке:

$('#slider li:nth-child(' + nextSlide + ')').fadeIn('fast');

Должно быть:

$('#slider li:nth-child(" + nextSlide + ")').fadeIn('fast');

Я не вижу проблемы, хотя это может быть только мой компьютер.