jQuery fadeTrong lá văn bản không chống răng cưa trong IE7

Question

Tại sao điều này lại xảy ra? Bất kỳ cách giải quyết nào?

jQuery:

 
$(function() { 
    $('p.quote').fadeIn(3000); 
}); 

HTML:

 
<p>someone said:</p> 
<p class="quote">&ldquo;lorem ipsum&rdquo;</p> 
<p>someone else said:</p> 
<p class="quote" style="display: none;">&ldquo;magna carta&rdquo;</p> 

Answer 1

Có một lỗi được biết đến với IE và các chức năng fadeIn/fadeOut và ảnh hưởng của họ trên các yếu tố văn bản. Kiểm tra các thông tin ở đây:

http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/

Hình như liên kết ban đầu của tôi đã từ đi chết. Cập nhật với một giải pháp khác nhau từ những nhận xét:

http://malsup.com/jquery/cycle/cleartype.html

Cách giải quyết là để loại bỏ các 'lọc' tài sản của các phần tử trong một chức năng gọi lại sau fadeIn() đã hoàn tất.

Answer 2

Từ những gì tôi nhớ, thuộc tính bộ lọc được đặt sẽ gây ra điều này. Sau khi fadeIn của bạn hoàn tất, hãy xóa thuộc tính lọc khỏi phần tử.

$('p.quote').fadeIn(2000, removeFilter); 

function removeFilter() { 
    $('p.quote').removeAttr("filter"); 
} 

Answer 3

Có vẻ như câu trả lời được chấp nhận hiện có liên kết đã chết. Tôi nghĩ rằng thông tin tương tự hiện có sẵn tại http://blog.wolffmyren.com/2009/05/28/jquery-fadeinfadeout-ie-cleartype-glitch/.

Để duy trì thông tin trong StackOverflow, sau đây là nội dung của liên kết:

Nhờ Benjamin Michael Novakovic cho sửa chữa này!

jQuery fadeIn/fadeOut IE ClearType trục trặc

Trong khi sử dụng jQuery javascript thư viện hiện nay tại nơi làm việc, tôi nhận thấy một trục trặc dưới IE7. Khi fading một nút html html với các hàm .fadeIn() và .fadeOut() trong jQuery, IE sẽ giảm bớt hiển thị windows Cleartype; trong đó kết quả trong văn bản rất xấu. Vấn đề này dường như rất phổ biến, nhưng không ai có một giải pháp tốt đẹp cho vấn đề .

Cách phổ biến nhất để giải quyết vấn đề này là xóa thuộc tính CSS của bộ lọc. Trong javascript bình thường, nó sẽ trông như thế này:

document.getElementById('node').style.removeAttribute('filter'); 

và trong jQuery, nó sẽ trông như thế này:

$('#node').fadeOut('slow', function() { 
    this.style.removeAttribute('filter'); 
}); 

qua Benjamin Michael Novakovic » jQuery fadeIn/fadeOut IE ClearType trục trặc.

Answer 4

Tôi tìm thấy giải pháp tốt hơn, tổng quát hơn, tại http://jquery.malsup.com/fadetest.html.

Tôi đã thực hiện điều đó và điều chỉnh nó thành một tệp JavaScript độc lập để được bao gồm trong các trang sử dụng các phương thức fade *() của jQuery.

// 
// jQuery IE Fade Fix 
// 
// Adapted from code found at http://jquery.malsup.com/fadetest.html. 
// 
// This is only needed for IE 7 and earlier, so this is best added to your page using IE's conditional comments 
// (http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx) as follows: 
//  <!--[if lt IE 8]><script type="text/javascript" src="jquery-ie-fade-fix.js"></script><![endif]--> 
// 
(function($) { 
    $.fn.fadeIn = function(speed, callback) { 
     if ($.isFunction(speed) && callback == undefined) { 
      callback = speed; 
      speed = 'normal'; 
     } 
     return this.animate({opacity: 'show'}, speed, function() { 
      if ($.browser.msie) 
      { 
       this.style.removeAttribute('filter'); 
      } 
      if ($.isFunction(callback)) 
      { 
       callback.call(this); 
      } 
     }); 
    }; 

    $.fn.fadeOut = function(speed, callback) { 
     if ($.isFunction(speed) && callback == undefined) { 
      callback = speed; 
      speed = 'normal'; 
     } 
     return this.animate({opacity: 'hide'}, speed, function() { 
      if ($.browser.msie) 
      { 
       this.style.removeAttribute('filter'); 
      } 
      if ($.isFunction(callback)) 
      { 
       callback.call(this); 
      } 
     }); 
    }; 

    $.fn.fadeTo = function(speed, to, callback) { 
     if ($.isFunction(speed) && callback == undefined) { 
      callback = speed; 
      speed = 'normal'; 
     } 
     return this.animate({opacity: to}, speed, function() { 
      if (to == 1 && $.browser.msie) 
      { 
       this.style.removeAttribute('filter'); 
      } 
      if ($.isFunction(callback)) 
       { 
       callback.call(this); 
      } 
     }); 
    }; 
})(jQuery); 

EDIT: sửa chữa Incorporated joeformd 's cho callbacks.

EDIT2: thêm sửa chữa đối với trường hợp góc nơi tốc độ không được định nghĩa nhưng callback là -Tomi

Answer 5

Đơn giản chỉ cần áp dụng màu nền cho yếu tố chính xác mà bạn mờ dần .. như xa như tôi nhớ nó sẽ không hoạt động trên dành cho trẻ em nếu nếu bạn áp dụng cho phụ huynh, vì vậy nó phải được trên yếu tố này rất được bí danh.

Answer 6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

Thêm mã này vào đầu tài liệu html của bạn. Nó hoạt động trên IE 8.07xxxx. Tôi không chắc kỹ thuật này hoạt động trên IE 7.

Answer 7

Thêm mã này vào JS của bạn. Nó sửa lỗi và duy trì phạm vi chính xác. Khi thêm vào jQuery, nó vẫn vượt qua tất cả các bài kiểm tra đơn vị:

(function($){ 
    $.each(['fadeIn', 'fadeOut'], function(i, method){ 
     var _fn = $.fn[method]; 
     $.fn[method] = function(easing, callbackå, cancel) { 
      if ($.isFunction(easing)) { 
       callback = easing; 
       easing = 'normal'; 
      } 
      return _fn.call(this, easing, function(){ 
       jQuery.browser.msie && !cancel && this.style.removeAttribute('filter'); 
       (callback || $.noop).call(this); 
      }); 
     } 
    }) 
})(jQuery); 

Written by me :)

Answer 8

Không ai trong số các giải pháp này làm việc cho tôi mờ dần trong một div sử dụng Animate jQuery, như bộ lọc là theo phong cách thành phần. Do đó, những gì tôi cần làm:

$(div).animate({opacity: 1}, 800, function() { 
    $(this).removeAttr('style'); 
}); 

Rõ ràng điều này sẽ xóa mọi kiểu nội tuyến khác mà bạn có thể có.

Answer 9

Không có giải pháp nào phù hợp với tôi hoặc không thích hợp, ví dụ: tôi không muốn thay đổi tuyên bố DTD HTML5 của mình chỉ vì một lỗi IE và tôi không thể thay đổi màu nền của mình trong một hoạt ảnh khác.

Tôi cũng đang sử dụng jQuery .animate vì vậy đây có thể là một chủ đề nhỏ nhưng giải pháp hoạt động hoàn hảo là this one. một bài viết tốt của nó nhưng mã cốt lõi là:

$('#sample').animate(
    {opacity:1.0}, 
    500, 
    function() { 
     $(this).css('filter',''); 
    } 
); 

Answer 10

Đây là cách tôi đã thoát khỏi xấu xí của tôi nhạt dần trong văn bản trên trình duyệt IE 8: sử dụng fadeTo thay và dụng cụ nó lên đến 99%!

Vì thế này làm việc cho tôi:

$(function() { 
    $('p.quote').fadeTo("slow",0.99); 
})