Newbie flickering issue

Newbie flickering issue

Hi all,

I'm new to jQuery and I've put together a sample page to test out some jQuery effects.

It's flickering in both IE and FF, and none of the solutions I've researched have helped (i.e. overflow:hidden). Can anyone spot the issue? I'm very interested in learning what the problem is...

Note that I'm using stop() to remove animate queue build-up, and reset() is a custom function to reset the div size/opacity. Could it be from this? Or the Doctype? or..?

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. .menuButton {
  6.       position:relative;
  7.       float:left;
  8.       background-color:white;
  9.       left:50px;
  10.       top:50px;
  11.       width: 100px;
  12.       height: 20px;
  13.       margin-right:10px;
  14.       border-left:2px solid darkgrey;
  15.       border-right:2px solid darkgrey;
  16. }
  17. .menuButton:hover {
  18.       border-left:2px solid red;
  19.       border-right:2px solid red;}
  20.       .pane {
  21.       position:absolute;
  22.       background-color:white;
  23.       left:50px;
  24.       top:100px;
  25.       width: 400px;
  26.       height: 600px;
  27.       margin-left:10px;
  28.       opacity:1;
  29.       border:4px solid darkgrey;
  30.       overflow:hidden;
  31. }
  32. </style>
  33. <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  34. </head>
  35. <body>
  36. <div id="home" class="menuButton" align=center> Home </div>
  37. <div id="pics" class="menuButton" align=center> Pics </div>
  38. <div id="picsPane" class="pane">insert info for picsPane div </div>
  39. <div id="homePane" class="pane"> insert info for homePane div </div>
  40. <script>
  41. $.fn.reset = function() {
  42.       $("#homePane").stop();
  43.       $("#picsPane").stop();
  44.       $("#picsPane").animate({opacity:0,height:100,width:100 },0)
  45.       $("#homePane").animate({opacity:0,height:100,width:100 },0)
  46. }
  47. $("#home").click(function(){
  48.       $().reset();
  49.       $("#homePane").stop().animate({opacity:1,height:'600px'},'fast')
  50.       .animate({width:'500px'},'slow');
  51. });
  52. $("#pics").click(function(){
  53.       $().reset();
  54.       $("#picsPane").stop().animate({opacity:1,height:'600px' },'fast')
  55.       .animate({width:'500px'},'slow');
  56. });
  57. </script>
  58. </body>
  59. </html>