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

Question

Может ли кто-нибудь сказать мне, почему .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> 

Answer 1

Я понял это, CSS позиции настройки: относительно на изображении, Aparently ie8 не нравится, что есть обходной путь Интересно, начинается поиск.

Answer 2

Заменить изображение с DIV (одного и того же размера) с фоновым изображением и выцветанию/отъезда в DIV.

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

Answer 3

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

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

opacity:inherit; 
filter:inherit; 

Например:

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

Весело,

Омер

Answer 4

Я только что это проблема, и все клещи css не работали. FadeIn/Out работал на FF и Chrome, но не в IE8, элемент вообще не появился. В IE7 они просто перешли от невидимого к видимому.

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

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

Таким образом, я всегда заставляю результат, который я хочу, в конце.

Answer 5

Для быстрого и грязного исправления (или если приведенные выше предложения просто не работают, как и в моем случае), вы можете просто заменить 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(); 
} 

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