Анимация не запускается правильно на слайде jQuery с первого раза

Question

У меня проблема, которая ставит меня в тупик. У меня относительно простой слайдер с тремя делителями. Когда я кликаю на второй div первый раз, третий div перекрывает первый (хотя проверенный CSS показывает, что его там не должно быть). Это происходит в каждом браузере, в котором я тестировал Safari 5.1, Chrome 10.x и FireFox 4.0.1. Последующие анимации, кажется, работают нормально, просматривая вперед и назад. Почему он работает неправильно при первой загрузке? Мой код кажется правильным. Это ошибка?

На этой странице одновременно происходит множество анимаций. После просмотра «вкладок» взад-вперед анимация (обходной плагин) прерывается. Это также, кажется, происходит случайно.

Эта является рассматриваемой страницей.

    $(".overview").click( function() {
    $("#overview").animate({
        left: '0'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    $("#keynote").animate({
        left: '1000px'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    $("#comparison").animate({
        left: '2000px'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    return false;
});

$(".keynote").click( function() {
    $("#overview").animate({
        left: '-1000px'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    $("#keynote").removeClass("hidden").animate({
        left: '0'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    $("#comparison").animate({
        left: '1000px'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    return false;
});

$(".comparison").click( function() {
    $("#overview").animate({
        left: '-2000px'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    $("#keynote").removeClass("hidden").animate({
        left: '-1000px'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    $("#comparison").removeClass("hidden").animate({
        left: '0'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    return false;
});

(замедление, похоже, тоже не работает - так что на самом деле это три проблемы в одной).

ОБНОВЛЕНИЕ: Исправил это сам. Смотрите ответ ниже.

Answer 1

Исправил это сам.Подсказка была в CSS и необходимость использовать условные операторы:

#overview {
left: 0px;
}

#keynote {
    left: 1000px;
}

#comparison {
    left: 2000px;
}

jQuery:

    $(".overview").click( 
function() {
if ($("#overview").css("left") != "0px" ) {
    $("#overview").animate({
        left: '0'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    $("#keynote").animate({
        left: '1000px'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    $("#comparison").animate({
        left: '2000px'
    }, { queue: false, duration: 600 }, 'easeOutBack')

}
return false;
});



$(".keynote").click( 
function() {
if ($("#keynote").css("left") != "0px" ) {
    $("#overview").animate({
        left: '-1000px'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    $("#keynote").removeClass("hidden").animate({
        left: '0'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    $("#comparison").animate({
        left: '1000px'
    }, { queue: false, duration: 600 }, 'easeOutBack')

}
return false;
});



$(".comparison").click( 
function() {
if ($("#comparison").css("left") != "0px" ) {
    $("#overview").animate({
        left: '-2000px'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    $("#keynote").removeClass("hidden").animate({
        left: '-1000px'
    }, { queue: false, duration: 600 }, 'easeOutBack')
    $("#comparison").removeClass("hidden").animate({
        left: '0'
    }, { queue: false, duration: 600 }, 'easeOutBack')

}
return false;
});

Answer 2

Проверьте, были ли установлены все параметры, используемые для анимации.Пример: обзор, сравнение, ключевая нота и т. Д. По умолчанию имеют левое значение.