Антиалиасинг после анимации в IE7

Скорп · April 30, 2009

Суть следующая: имеется на сайте контейнер с текстом, который становится видимым с помощью jQuery метода fadeIn().

Проблема заключается в том, что после работы скрипта текст в этом контейнере в IE7 становится несглаженным. Исследования в кривом а-ля Firebug в IE8, работающем в режиме IE7, показали, что jQuery для IE, что очевидно, использует фильтр alpha, и после того, как контейнер стал полностью непрозрачным, он содержит свойства «filter:; zoom: 1; display:block;». Именно пустое значение свойства filter навевает на мысль о том, что это влияет на сглаживание шрифтов. Напрашивается вопрос: какое значение filter нужно установить для того, что IE7 показал текст сглаженным?

Зачему, что подобное поведение присуще лишь IE7 — IE8 после появления контейнера честно применяет сглаживание к вновь появившемуся тексту.

onqu · May 4, 2009

Попробуйте применить стиль цвета к тексту такой же, как и у фона.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" charset="utf-8"></script>
	<script type="text/javascript">
	$(function(){
		$('a.animatedtext').each(function(){
			$(this).parent().next().hide();
			$(this).click(function(){
				$(this).parent().next().animate({opacity:'toggle'},'slow');
				return false;
			});
		});
	});
	</script>
	<style type="text/css">
	body {
		background:#fff;
	}
	p.test {
		background:#fff;
	}
	</style>

</head>
<body>
		<h3><a href="#" class="animatedtext">нажми</a></h3>
		<p class="test">Текст для примера с фоном.</p>
		<h3><a href="#" class="animatedtext">нажми</a></h3>
		<p>Текст для примера без фона.</p>
</body>
</html>

Скорп · May 4, 2009

В IE7 (и в IE8 в режиме совместимости, и в IE Tester) оба параграфа после появления — без антиалиасинга.

onqu · May 5, 2009

$(function(){
	$('a.animatedtext').each(function(){
		$(this).parent().next().hide();
		$(this).click(function(){
			$(this).parent().next().animate({opacity:'toggle'},'slow', function() {
				if ($.browser.msie) this.style.removeAttribute('filter');
			});	
		;return false;
		});
	});
});

Sign In

Антиалиасинг после анимации в IE7

Question

Скорп

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

onqu

Link to comment

Share on other sites

Скорп

Link to comment

Share on other sites

onqu

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information