Сбой функции jQuery CSS / Animate при абсолютном позиционировании слева

#jquery #css #css-position

Вопрос:

У нас есть функция jQuery, которая управляет серией абсолютно расположенных панелей, которые скользят слева и слева друг над другом. Первоначально это контролировалось webkit с помощью jQuery add/removeClass . Для большей совместимости мы теперь используем jQuery с возможностью использования webkit.

Проблема в том, что панели вкладок должны начинаться в left:-560px; швах jQuery, чтобы игнорировать это в CSS, поэтому я написал в строке в jQuery, переместив ее туда. Это тоже сбой, но фактическая функция работает. Проблема в том, что все панели начинаются с left:0px;

 var tabbarpan;
        // THIS LINE SHOULD MOVE ALL PANELS TO left:-560px; BUT IT DOESN'T //
    $('#coursepack .corecol .chamber').css('left','-560');

    // NAVIGATION //
    $('#coursepack .tabbar a').click(function(){
        $('#coursepack .tabbar a').removeClass('active');
        $(this).addClass('active');

        $('#'   tabbarpan).animate({left:'-560', opacity:0.6, leaveTransforms:true},750);

        tabbarpan = $(this).attr('rel');
        $('#'   tabbarpan).animate({left:' 0', opacity:1, leaveTransforms:true},750);

        $('#coursepack .review').removeClass('open');
        $('#coursepack .corecol .extention').animate({left:'=180px', opacity:0},{ duration: 500 });

        return false
    });

Есть идеи, почему?

Чудесно

Ответ №1:

 $('#coursepack .corecol .chamber').css('left','-560');

Вы пропустили px в этой строке, должно быть

 $('#coursepack .corecol .chamber').css('left','-560px');

1. и здесь тоже «.animate({left:’-560′,» — добавить пиксель

2. Увлекательно. Хотя это сработало, сейчас 9-я строка не работает. $(‘#’ панель вкладок).animate({left:’ 0′, непрозрачность: 1, leaveTransforms:true},750);

3. @Robin «leaveTransforms: true», его нет в базовом jquery animate, я думаю, это часть плагина, вы не упомянули об этом, убедитесь, что вы связали и активировали этот плагин…

4. Это плагин. Я только что обнаружил, что это работало в старом firefox, когда использовался jQuery animate. В современных браузерах он использует CSS3 для перевода x, y, и это дает разные результаты. Почти исправил это и отправит ответ через минуту

Ответ №2:

вы должны использовать left с «px», например:-

 .css('left','-560');
to
.css('left','-560px');

Ответ №3:

Проблема возникла в результате использования плагина, используемого для улучшения jQuery animate для использования CSS3 везде, где это возможно.

Этот плагин вместо того, чтобы использовать переход слева, использовал translate x, y. Таким образом, в старых браузерах это работало отлично, а в современных — нет. Небольшая доработка кода устранила проблему с принудительным запуском анимации, так что вместо того, чтобы перемещать панель с помощью CSS для начала, мы перемещаем ее с помощью animate, таким образом, она будет переведена для современных браузеров с помощью CSS3.

var tabbarpan; $(‘#coursepack .corecol .chamber’).animate({left:’-560px’, непрозрачность: 0.6, leaveTransforms:true},100);

 // NAVIGATION //
$('#coursepack .tabbar a').click(function(){
    $('#coursepack .tabbar a').removeClass('active');
    $(this).addClass('active');

 //ANIMATION FIRST FORCES TRANSLATE FOR CSS3 BROWSERS //
    $('#'   tabbarpan).animate({left:'-560px', opacity:0.6, leaveTransforms:true},750);

    tabbarpan = $(this).attr('rel');
    $('#'   tabbarpan).animate({left:' 0px', opacity:1, leaveTransforms:true},750);

    $('#coursepack .review').removeClass('open');
    $('#coursepack .corecol .extention').animate({left:'=180px', opacity:0},{ duration: 500 });

    return false
});

Чудесно