jQuery animate opacity, удалите div и получите ошибку неверного аргумента в ie8 - PullRequest
Новая
       2

jQuery animate opacity, удалите div и получите ошибку неверного аргумента в ie8

1 голос
/ 19 августа 2010

У меня есть список логотипов, которые должны быть в центре, пока все хорошо.Получая доступ к странице, я заметил, что при позиционировании картинки выглядят ужасно.Поэтому я решил установить 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.

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

Редактировать3: ОК, f *** отключить динамический расчет ...

РЕШЕНИЕ 

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 ...

1 Ответ

0 голосов
/ 19 августа 2010

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

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

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

$img.css('padding-top', Math.max(0, ($li.height() / 2) - ($img.height() / 2)));
...