我意识到这是一个经常被人涉足的领域,但我无法在 SO 或其他工作场所获得任何推荐的解决方案。
我有一个 div,里面有文本,我想在单击时淡出到 25%,然后在后续单击时淡入到 100%。它在除 IE 之外的所有浏览器中都运行良好(我正在 IE8 中进行测试)。问题:淡入 div 后,IE 中的文本全是锯齿状且不完整(我认为正确的术语可能是“未抗锯齿”)。
我已经尝试了所有我能找到的推荐解决方案。最常推荐的似乎是我在下面的示例中包含的一个,即对不透明度进行动画处理(而不是使用 fadeTo),对 IE 应用 filter:alpha(opacity),然后在回调中删除过滤器动画到 100% 已完成。我也尝试过(根据其他建议):
- css 背景颜色和无背景颜色(对于 div)
- 删除过滤器的各种方法(请参阅下面代码中的注释)
- 确保我的 div 具有高度、宽度和 float:left
这是 JavaScript:
$(document).ready(function(){
$("#fade_button").click(function(){
$('#test_div').animate(
{opacity:0.25},
500,
function() {
$("#test_div").css('filter','alpha(opacity=25)');
});
});
$("#unfade_button").click(function(){
$('#test_div').animate(
{opacity:1.0},
500,
function() {
$("#test_div").css('filter','none'); // tried ('filter','') and document.getElementById("#test_div").style.removeAttribute("filter")
});
});
});
这是CSS:
div#test_div
{
float:left;
width:1000px;
height:200px;
margin-left:50px;
border:1px solid black;
background-color:yellow;
}
非常感谢您的指导!
最佳答案
问题是 IE 添加了过滤属性。我使用这个插件来删除它。
(function($) {
$.fn.fadeIn = function(speed, callback) {
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) {
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) {
return this.animate({opacity: to}, speed, function() {
if ( to == 1 && $.browser.msie )
{
this.style.removeAttribute('filter');
}
if ( $.isFunction(callback) )
{
callback.call(this);
}
});
};
})(jQuery);
然后有条件地添加它。
<!--[if IE]><script type="text/javascript" src="jquery-ie-fade-fix.js"></script><![endif]-->
关于jquery - IE 在 JQuery 淡出/不透明动画中扭曲文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9116766/