JQuery Pulsate - Weird behaviour with Firefox
I'm trying to pulsate some text using JQuery, which gives some jagged edges when using Firefox, I tried to isolate the problem, and it happens when I change the text color to red using CSS. It seems as if there are bits of black left. Works ok in other browsers, even IE, so I'm a bit confused now. Here's the code:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquer开发者_运维百科y-ui.min.js"></script>
<script>
$(document).ready(function() {
$(".blink").effect("pulsate", { times:100 }, 2000);
});
</script>
</head>
<body>
<div class="blink">
<p style="color:red;">The text to be pulsated</p>
</div>
</body>
After looking at cdutson's comment, I did some quick research. Looks like IE uses "ClearType" by default, whereas other applications like Firefox use your system settings. Open up your Windows' display settings and select "Advanced" and you'll see a setting for "effects." Change that setting to ClearType and you'll have nicer looking fonts system-wide, including in FF.
I had ClearType enabled when I tested your problem and could still see a little blackening around the red text when pulsating, but it wasn't as bad as when I retried the example with ClearType off. So that may help you.
On the other hand, you have to understand that it will still look bad for those users who do not have ClearType enabled.
加载中,请稍侯......
精彩评论