fadein bold text jquery

/ Published in: HTML
Save to your folder(s)

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 :)


Copy this code and paste it in your HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  5. <title>jquery</title>
  6. <link type="text/css" rel="stylesheet" href="css/style1.css" />
  7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" ></script>
  8. <!-- I would normally place this javascript in an external file same is for the inline css -->
  9. <script type="text/javascript">
  10. $(document).ready(function() {
  11. $('.boldtext').css('display','none').fadeIn(1500);
  12. $('.boldtext2').css('display','none').delay(500).fadeIn(1500);
  13. });
  14. </script>
  15. </head>
  16. <body>
  17. <div style="height:40em;width: 40em;border: 1px solid #cccccc; margin:0 auto;">
  18. <div class="boldtext boldi" style="font-weight:bold;">
  19. <p>I am an element inside the targeted, with a font-weight:bold and in IE i get distorted</p>
  20. </div>
  21. <div class="boldtext2" style="font-weight: bold; background:white;">
  22. <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>
  23. </div>
  24. <p>
  25. so in a nutshell, the last split second in IE is far from fluid is there a way to fix that?
  26. </p>
  27. </div>
  28. </body>

Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.