[jQuery] IE Flicker Issue
I am in the process of learning jquery and thought that I would try
and duplicate some common flash functionality in jquery. Just to see
if I could get it to work.
I was able to get the code working but run into an error on I.E that I
do not see in firefox. Could someone please give me an idea why I get
a flicker when viewing the menu in I.E that doesn't appear in Firefox?
Original Flash Version
http://www.gm.com
My JQuery Version
http://www.indyscripters.com/gm_rebuild_burst_plugins.html
Thanks in advance
**Here is my plugin code.**
(function($){
$.fn.bubbleMenu = function(menuContent) {
$(menuContent).hide();
$(this)
.hover(function(e){
e.preventDefault();
this.blur();
var method1 = 'easeInOutQuad';
$(menuContent)
.animate({height:'toggle'},{duration:500,easing:'easeInOutQuad'})
.show();
},function(e){
e.preventDefault();
this.blur();
$(menuContent)
.animate({height:'toggle'},'slow', function () {
$(menuContent).hide();
});
})
return this;
}
})(jQuery);
**Here is my code for the page**
<html>
<head>
<script type="text/javascript" src="jquery/jquery-1.2.3.js"></script>
<script type="text/javascript" src="plugins/jquery.easing.1.3.js"></
script>
<script type="text/javascript" src="plugins/
jquery.jqia.bubbleMenu.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#corporate").bubbleMenu('div#corporate > div.content');
$("#experience").bubbleMenu('div#experience > div.content');
$("#vehicles").bubbleMenu('div#vehicles > div.content');
});
</script>
<link type="text/css" rel="stylesheet" href="css/gm_rebuild.css">
</head>
<body>
<table width="800" border="0" align="center">
<tr>
<td>
</td>
</tr>
<tr>
<td>
<table align="center" cellspacing="20" width="600" border="0"
height="500" id="mainframe">
<tr>
<td valign="middle">
<!-- Corporate Information Area -->
Corporate Information
<table id="menuitems" cellpadding="0" cellspacing="1" border="0">
<tr><td></td></tr>
<tr><td class="menuitem">Corporate Information Home</td></tr>
<tr><td class="menuitem">About GM</td></tr>
<tr><td class="menuitem">Corporate Responsibility</td></tr>
<tr><td class="menuitem">Investor Information</td></tr>
<tr><td class="menuitem">Careers</td></tr>
<tr><td class="menuitem">Dealers & Suppliers</td></tr>
<tr><td class="menuitem">Employees & Retirees</td></tr>
</table>
<!-- Corporate Information Area -->
</td>
<td>
GM Vehicles
<table id="menuitems" cellpadding="0" cellspacing="1" border="0">
<tr><td></td></tr>
<tr><td class="menuitem">GM Vehicles Home</td></tr>
<tr><td class="menuitem">Current Offers</td></tr>
<tr><td class="menuitem">Dealer Locator</td></tr>
<tr><td class="menuitem">Guides & Brochures</td></tr>
<tr><td class="menuitem">Services</td></tr>
<tr><td class="menuitem">Parts & Accessories</td></tr>
<tr><td class="menuitem">Certified Used Vehicles</td></tr>
<tr><td class="menuitem">Fleet * Commercial</td></tr>
</table>
</td>
<td>
Experience GM
<table id="menuitems" cellpadding="0" cellspacing="1" border="0">
<tr><td></td></tr>
<tr><td class="menuitem">Experience GM Home</td></tr>
<tr><td class="menuitem">Fuel Economy & Alternatives Fuels</td></tr>
<tr><td class="menuitem">Safety</td></tr>
<tr><td class="menuitem">Quality</td></tr>
<tr><td class="menuitem">Technology</td></tr>
<tr><td class="menuitem">Entertainment & Special Events</td></tr>
<tr><td class="menuitem">Auto Shows</td></tr>
<tr><td class="menuitem">Education</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</body>
</html>