#jquery #css #css-position
#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. слева: ‘= 180px’, почему «=» ? и пиксели пропущены во многих местах…
Ответ №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
});
Чудесно