JQuery анимирует непрозрачность, удаляет div и получает недопустимую ошибку аргумента в ie8

Я получил список логотипов, которые должны быть центрированы, пока все хорошо. При доступе к странице я заметил, что изображения получили уродливый скачок при позиционировании. Поэтому я решил установить div над этими логотипами, уменьшить непрозрачность с 1 до 0 и, наконец, удалить его, чтобы они снова стали кликабельными.

Очень хорошо работает в Firefox, Opera и т. д., но НЕ в IE.

Я перешел на полную версию jQuery. Вывод отладчика выглядит так:

if ( set ) {
 style[ name ] = value;
}

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

jQuery(window).load(function() {
 jQuery(".img_center").each(function(){
  var $li = jQuery(this), $img = $li.find('img');
  $img.css('padding-top', ($li.height() / 2) - ($img.height() / 2));
 });
 jQuery(".overlay_pic").animate({opacity: 0}, 2000, 'swing').queue(function(){
   jQuery(this).remove();
 });
});

HTML:

<li class="img_center">
 <div class="overlay_pic"></div>
 <a href="">
  <img src="image/logos/countryclassics.jpg" border="0" alt="" />
 </a>
</li>
<li style="margin:0;" class="img_center">
 <div class="overlay_pic"></div>
 <a href="">
  <img src="image/logos/donna.jpg" border="0" alt="" />
 </a>
</li>

CSS:

.overlay_pic{
 width:inherit;
 height:inherit;
 background:white;
 opacity:1;
 position:absolute;
}

Любые идеи? :/

Редактировать: хорошо, позиционирование является источником этой ошибки. Расчет значения padding-top колеблется между правильным значением и бредовым бинго.

высота li (половина) обычно -> 80, но иногда просто 8. В результате padding-top -13px.

Итак, новая функция расчета выигрыша?!

Edit3: Хорошо, к черту динамический расчет...

РЕШЕНИЕ

jQuery(window).load(function() {
var li = "80";
jQuery(".img_center").each(function(){
    var $li = jQuery(this), $img = $li.find('img');
    $img.css('padding-top', (li) - ($img.height() / 2));
});
jQuery(".overlay_pic").animate({opacity: 0}, 2000, 'swing').queue(function(){
        jQuery(this).remove();
});

});

Я задаю высоту статично, без расчета. Слава богу, это не полноценная динамическая ul li box...


arguments jquery jquery-animate
person vertic4l    schedule 19.08.2010    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я подозреваю, что ваше вычисление «высоты» дает NaN, и IE не нравится, когда вы устанавливаете это как значение для «padding-top». IE часто возвращает «авто» в качестве значения «высоты». Вы можете попробовать изменить это на «innerHeight» и посмотреть, поможет ли это. (редактировать хорошо, теперь, когда я думаю об этом, метод "высоты" jQuery должен всегда давать вам число ... однако я все еще думаю, что проблема каким-то образом связана с настройкой этого свойства CSS. Посмотрите, что говорит отладчик о значении «value» в этой строке внутри jQuery.)

Отладка с помощью неминифицированного jQuery — отличная идея. В отладчике вы можете щелкнуть вкладку «Локальные переменные» в правой части панели отладчика, чтобы увидеть локальные переменные, и использовать «Стек», чтобы пройти по стеку и найти локальные переменные во внешних контекстах. (К сожалению, насколько я могу судить, отладчик IE не может показывать переменные во внешних областях, которые захвачены как замыкания, но в данном случае это, вероятно, не будет проблемой.)

редактировать еще раз а, хорошо, спасибо за публикацию ссылки. Проблема в том, что вы пытаетесь установить «padding-top» на «-13px», чего IE не допустит (и это правильно). Это было ясно в отладчике, просто проверив представление «Местные жители». Чтобы этого избежать, просто используйте Math.max:

$img.css('padding-top', Math.max(0, ($li.height() / 2) - ($img.height() / 2)));
person Pointy    schedule 19.08.2010
comment
Спасибо за этот совет. Ошибка возникает в строке 4618 в jQuery. Я просмотрел эти локальные переменные и заметил, что непрозрачность в конце списка не определена. Но для css установлено значение 1, а затем для jQuery - 0... Ничего похожего на NaN не найдено:/ - person vertic4l; 19.08.2010
comment
ОК, я отредактировал ответ - проблема в том, что высота изображения явно больше, чем высота <li>, поэтому вы пытаетесь установить отрицательное заполнение, а это не разрешено. - person Pointy; 19.08.2010
comment
Ах да, я тоже заметил это -13px, но не знал, что это может быть источником всего зла. Но как мне обойти? :/ И я действительно не вижу отступа -13px на всех этих логотипах... - person vertic4l; 19.08.2010
comment
отредактировано снова - просто убедитесь, что значение не меньше нуля. - person Pointy; 19.08.2010
comment
li имеет размер 160x160 пикселей, каждое изображение имеет ширину 150 пикселей и макс. высота 150px, большинство из них меньше 150px...?! Вы имеете в виду, что я просто должен проверить с помощью регулярного выражения, является ли значение отрицательным, и переключить его на положительное?! - person vertic4l; 19.08.2010
comment
Удивительный! большое спасибо Pointy, хотя это означает, что один логотип, который инициирует проблему, не будет установлен в центре li. Правильным значением для восьмого логотипа будет padding-top:59px; Я действительно не понимаю, как получается -13px, но затем устанавливает значение 59px. как в фф или опере так и есть... - person vertic4l; 19.08.2010