text jumps using jQuery

[maxelcat]

Hi

Am doing my first bit of jQuery and I thought it was all great until I looked closely. I'd really appreciate any help!

All I want to do is fade in an absolutely positioned div with a couple of lines of text in it when the page loads. There is nothing to press.

This is my code:

$(document).ready(function() {
  $('#toptext').css('display','none');
  $('#bottomtext').css('display','none');
$('#toptext').fadeIn(2000);return false;
})

My text fades in nicely but at the end, all the letters jump a little - like something is resizing.

Here's the html

<div id="toptext">
<p class="domesticabuse">DOMESTIC ABUSE</p>
<p class="canhappen">can happen to anyone</p>
</div>

A few divs up there is a relatiely positioned wrapper

Here's my css

div#homepageanimation {
	color: #f9af2d;
	font-weight:normal;
	position:absolute;
	z-index:10;
	width:302px;
	top:0;
	left:320px;
	height:300px;
	background-color:#6F9;
	text-align:center;
}
div#toptext {
	position:absolute;
	top:70px;
	width:200px;
	z-index:20;
	height:200px;
	background-color:#6CF;
	padding:20px;
}
.domesticabuse {
	font-size:28px;
	margin:0px;
	padding:0;
	font-weight:bold;
}
.canhappen {
	font-size:20px;
	margin:0;
	padding:0;
}

Thanks

E

[pritaeas]

I think this is an IE thing. Probably rerendering the font when it's fully visible. When posting the code on jsbin.com I can see it happen in IE, but not in Opera or Safari.

[benhowdle89]

I second the IE thing. Happened to me...

[maxelcat]

Thanks to you both for your replies and help.

I realised that this wasn't the most helpful post so if you'd like to see the link here it is www.elevateservice.net

I certainly can't reproduce this in other browsers, and its most visible on the "YOU" which is 60px or so. I did begin to wonder if it was something to do with the way IE renders the fonts - i think it adds anti-alias or something after its rendered them.

I might end up doing it with images, which would always be smooth I guess.

Once again, thanks for your comments - put my mind at rest about my very basic jQuery skills.

[benhowdle89]

http://forum.jquery.com/topic/jquery-prevent-jagged-text-in-ie

this might help, when i ran across the problem last time for our company site (which i gave up in the end and just left the text rendering jagged in IE) there were a few suggestions of setting a background colour to the <p> tag or fading in an entire div with the text in it. Neither of these really worked properly but they may help you take them further! Good luck, and let me know if you get it fixed!! By the way if you open our company website in IE www.ortomader.co.uk and see the text slideshow in the top right, you will see the text jump slightly right before a fade...go figure!?

[maxelcat]

Looked at the company website - does exactly the same as the one I am messing around with - www.elevateservice.net

I think I am going to create images of the next. Not a great solution, but it will stop it I think

Why is IE ALWAYS the thorn in the flesh?

[benhowdle89]

Word of warning IE also has a issue with PNG images fading, the transparency screws up!