Return to Snippet

Revision: 37211
at December 6, 2010 09:25 by epictree


Initial Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>jquery</title>
        <link type="text/css" rel="stylesheet" href="css/style1.css" />
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" ></script>
           <!-- I would normally place this javascript in an external file same is for the inline css -->
            <script type="text/javascript">
                $(document).ready(function() {
                    $('.boldtext').css('display','none').fadeIn(1500);
                    $('.boldtext2').css('display','none').delay(500).fadeIn(1500);
                });
            </script>
    </head>
        <body>
            <div style="height:40em;width: 40em;border: 1px solid #cccccc; margin:0 auto;">
                <div class="boldtext boldi" style="font-weight:bold;">
                    <p>I am an element inside the targeted, with a font-weight:bold and in IE i get distorted</p>
                </div>
                <div class="boldtext2" style="font-weight: bold; background:white;">
                    <p>I am an element inside the targeted, with a font-weight:bold and in IE dont't get distorted because of the background, but i jump to the left</p>
                </div>
                <p>
                    so in a nutshell, the last split second in IE is far from fluid is there a way to fix that?
                </p>
            </div>
        </body>

Initial URL


Initial Description
this thing works except of course for IE which makes the bold text make a little jump like effect in the end. If anyone has a solution please let me know :)
cheers!

Johanna

Initial Title
fadein bold text jquery

Initial Tags
jquery

Initial Language
HTML