jQuery fadeIn fadeOut — IE8 не исчезает

Может ли кто-нибудь сказать мне, почему .jpg не исчезает и не исчезает в IE8. Прямо сейчас он просто исчезает и появляется снова без изменения непрозрачности. У меня это настроено локально и на сервере публикации, странно то, что изображения появляются и исчезают очень хорошо локально, только когда я иду на сервер публикации, они перестают исчезать.

Просто интересно, не упускаю ли я что-то, кто-то мог бы быстро помочь мне с головой.

Вот gcRotateContent, который находится на сервере публикации. Если я просто добавляю изображение и делаю постепенное исчезновение, оно работает, по какой-то причине оно не работает с этой разметкой.

<div class="gcRotateContent">
   <div id="USCFRR2EN" class="gcEmployeeProfile">
      <div class="gcEmployeeProfileHeading">
         Meet John</div>
      <div class="gcEmployeeProfileContent">
         <div class="gcEmployeeProfileHRPad">
         </div>
         <div class="gcEmployeeProfileHR">
         </div>
         <div class="gcEmployeeProfileHRPad">
         </div>
         <div class="gcEmployeeProfileSLVideo">
            <img src="/PublishingImages/Profile_JOHN-190x96.jpg" alt="Portrait of employee John."
               height="96" width="190"></div>
         <div class="gcEmployeeProfileName">
         </div>
         <div class="gcEmployeeProfileTitle">
            Software Development Lead, Server Performance</div>
         <div class="gcEmployeeProfileQuote">
            “You will find no other company with the sheer breadth of technologies. The things you get to see and learn from other
            people are amazing.”</div>
      </div>
      <div class="gcEmployeeProfileFooter">
      </div>
   </div>
</div>

<div class="gcRotate">
      <div class="gcRotateContent">
         <div style="border: solid 2px black; text-align: center; width: 150px;">
            This is first content
            <img src="http://pix.motivatedphotos.com/2008/6/16/633492359109161542-Skills.jpg"
               alt="First" />
         </div>
      </div>
      <div class="gcRotateContent">
         <div style="border: solid 2px black; text-align: center; width: 150px">
            This is second content
            <img src="http://www.funnycorner.net/funny-pictures/5010/cheezburger-locats.jpg"
               alt="Second" />
         </div>
      </div>
      <div class="gcRotateContent">
         <div style="border: solid 2px black; text-align: center; width: 150px">
            This is third content
            <img src="http://icanhascheezburger.files.wordpress.com/2007/06/business.jpg" alt="Third" />
         </div>
      </div>
   </div>



   <div>
      This shouldn't move.
   </div>

   <script type="text/javascript">
      function fadeContent() {

         $(".gcRotateContent").first().customFadeOut(500, function() {
            $(".gcRotateContent:hidden:first").customFadeIn(500)
         });
         $(".gcRotateContent").first().appendTo($(".gcRotateContent").parent());
      }

      $(".gcRotate").height(0);

      $(".gcRotateContent").each(
         function() {
            if ($(".gcRotate").height() < $(this).height()) {
               $(".gcRotate").height($(this).height());
            }
         }
         );

      $(".gcRotateContent").each(function() {
         $(this).css("display", "none")
      });

      $(".gcRotate").hover(function() { window.clearInterval(timer) }, function() { timer = window.setInterval("fadeContent()", 2000) });

      $(".gcRotateContent").first().show(0);
      var timer = window.setInterval("fadeContent()", 2000);

      (function($) {
         $.fn.customFadeIn = function(speed, callback) {
            $(this).fadeIn(speed, function() {
               if (jQuery.browser.msie)
                  $(this).get(0).style.removeAttribute('filter');
               if (callback != undefined)
                  callback();
            });
         };
         $.fn.customFadeOut = function(speed, callback) {
            $(this).fadeOut(speed, function() {
               if (jQuery.browser.msie)
                  $(this).get(0).style.removeAttribute('filter');
               if (callback != undefined)
                  callback();
            });
         };
      })(jQuery);
   </script>

person theDawckta    schedule 04.05.2010    source источник
comment
Давайте посмотрим вашу разметку и скрипт.   -  person Ben    schedule 04.05.2010
comment
Покажите нам пример, и я гарантирую, что кто-то может помочь.   -  person Sam    schedule 04.05.2010
comment
@Eric - Что касается MSIE, IE8 на самом деле не НАСТОЛЬКО плох!   -  person Sam    schedule 04.05.2010
comment
Честная оценка. Он определенно превосходит IE6.   -  person Eric    schedule 04.05.2010
comment
@theDawckta - Опять же, у меня это отлично работает. Можно ссылку?   -  person Sam    schedule 04.05.2010


Ответы (5)


Видимо есть обходной путь!

Просто установите для элементов с абсолютным/относительным позиционированием следующие атрибуты css:

opacity:inherit;
filter:inherit;

E.g:

<div>
<img id='myImg' src='http://mydomain.com' style='position:absolute;top:10px;left:5px;filter:inherit;opacity:inherit' />
</div>

Развлекайся,

Омер

person Omeriko    schedule 02.09.2010
comment
Это работает как шарм! У меня была такая же проблема на моем сайте. Я затухал элементы div, которые содержали изображения. Чтобы исправить это для IE9 и IE7, достаточно было установить соответствующие размеры для элементов div. До этого div имел размеры 0,0, так как изображения внутри них были абсолютно позиционированы. Но после этого еще IE8 не хотел исчезать, он просто всплывал. Установка непрозрачности и фильтра для наследования для всех элементов внутри div исправила это. - person Lukasz Korzybski; 21.05.2011
comment
.ie8 * { непрозрачность: наследовать; фильтр: наследовать; } - person zznq; 05.03.2012
comment
Это хороший общий обходной путь для непрозрачности и постепенного появления/исчезновения. Небольшое предостережение заключается в том, что фильтры, как правило, используются в других обходных путях (текстовые тени, поддержка box-shadow) в IE. Это усложняет эти решения, если они находятся внутри блока, который должен динамически появляться/исчезать. - person ricosrealm; 15.03.2012
comment
* { непрозрачность: наследовать; фильтр: наследовать; } сработало для меня. Мне также пришлось добавить #mydiv {фон: белый}, чтобы эффект наведения учитывался должным образом. - person vinyll; 31.07.2012
comment
фантастика! это простое решение надоедливой проблемы - person ejfrancis; 12.06.2013

Я разобрался, настройка css position:relative на изображении, видимо ie8 это не нравится, есть ли обходной путь интересно, начинается поиск.

person theDawckta    schedule 04.05.2010

У меня только что была эта проблема, и все тики css не работали. FadeIn/Out работали в FF и Chrome, но не в IE8, элемент вообще не появлялся. В IE7 они просто превратились из невидимых в видимые.

Поэтому, чтобы решить мою проблему, я просто хотел сохранить постепенное появление / исчезновение в других браузерах и сделать так, чтобы элементы отображались в IE8. Решение состояло в том, чтобы использовать обратный вызов следующим образом:

$(".elements").fadeIn("slow",function(){$(this).show()}):
$(".elements").fadeOut("slow",function(){$(this).hide()}):

Таким образом, я всегда добиваюсь желаемого результата.

person Victor Martins    schedule 13.07.2012

Для быстрого и грязного исправления (или если приведенные выше предложения просто не работают, как в моем случае), вы можете просто заменить fadeIn/fadeOut jQuery на show/hide. Итак, в html выполните:

<!--[if IE]>
<script type="text/javascript src="ieFixes.js"></script>
<![endif]-->

и в каком-то файле javascript хаков IE (например, ieFixes.js) поместите:

jQuery.fn.fadeIn = function() {
    this.show();
}

jQuery.fn.fadeOut = function() {
    this.hide();
}

Вам придется немного настроить это, если вы связываете анимационные вызовы и т. д.

person Jacob Mouka    schedule 22.06.2013

Замените свое изображение на div (того же размера) с фоновым изображением и добавьте/уменьшите div.

<div style="background-image:url('paper.gif');height:xxxpx;width:xxxpx"></div>
person Bastiaan Linders    schedule 04.05.2010