jQuery fadeIn fadeOut - IE8 không phai mờ

Question

Bất cứ ai có thể cho tôi biết lý do tại sao một .jpg sẽ không phai hoặc mờ dần trong IE8. Ngay bây giờ nó chỉ là disapearing và tái xuất hiện với không có thay đổi độ mờ đục. Tôi có thiết lập này cục bộ và trên một máy chủ xuất bản, điều kỳ lạ là hình ảnh mờ dần vào và ra chỉ tốt tại địa phương, nó chỉ khi tôi đi đến máy chủ xuất bản mà họ không còn phai mờ nữa.

Chỉ cần tự hỏi liệu tôi có thiếu thứ gì đó mà một người nào đó có thể nhanh chóng giúp tôi thoát khỏi đầu của họ không.

Đây là gcRotateContent trên máy chủ xuất bản, Nếu tôi chỉ cần ném hình ảnh lên và làm mờ dần, nó sẽ không hoạt động với đánh dấu này.

<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

Tôi đã tìm ra, vị trí thiết lập css: tương đối trên hình ảnh, tức là8 không thích điều đó, có cách giải quyết nào không, tôi bắt đầu tìm kiếm.

Answer 2

Thay thế hình ảnh của bạn với một div (cùng kích thước) với một hình ảnh nền và fade-in/out div.

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

Answer 3

Rõ ràng có một giải pháp thay thế!

Đơn giản chỉ cần thiết lập/yếu tố tuyệt đối tương đối vị trí các css thuộc tính sau đây:

opacity:inherit; 
filter:inherit; 

Ví dụ:

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

Hãy vui vẻ,

Omer

Answer 4

Tôi chỉ có điều này vấn đề, và tất cả các dấu css không hoạt động. Tính năng fadeIn/Out hoạt động trên FF và Chrome, nhưng không phải trong IE8, phần tử không hiển thị. Trong IE7, chúng chỉ chuyển từ vô hình thành hiển thị.

Vì vậy, để khắc phục sự cố của tôi, tôi chỉ muốn giữ phai mờ/tắt trên các trình duyệt khác và làm cho các thành phần xuất hiện trong IE8. Giải pháp là sử dụng gọi lại như vậy:

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

Bằng cách này tôi luôn luôn buộc kết quả tôi muốn cuối cùng.

Answer 5

Để khắc phục nhanh chóng và bẩn (hoặc nếu các đề xuất ở trên không hoạt động, như trường hợp của tôi), bạn chỉ cần thay thế fadeIn/fadeOut của jQuery bằng hiện/ẩn. Vì vậy, trong html làm:

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

và trong một số javascript tập tin của IE hacks (ví dụ ieFixes.js) đặt:

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

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

Bạn sẽ phải tinh chỉnh này một chút nếu bạn đang chaining gọi điện animate, v.v.