There's been some work on improving effects in Webkit here: http://jquery-ui.googlecode.com/svn/branches/labs/effects/
Give that a shot. If that fixes it, should be in the next 1.8 pre-release. We're still working on integrating those into the trunk. There have also been some other effects fixes in the trunk since 1.7.2, so try here as well: http://jquery-ui.googlecode.com/svn/trunk/ If neither fix it, please create a ticket http://dev.jqueryui.com/newticket (note: requires registration) Thanks. - Richard On Thu, Nov 12, 2009 at 3:20 AM, TH Lim <[email protected]> wrote: > Using Richard's solution, I manage finished my widget. It works > flawlessly in Firefox. toggleClass(...) is broken in Webkit (Safari > and Chrome) browsers and IE7/8. With IE, if I didn't set the > foreground color, toggleClass works. Is this another bug with > toggleClass? Is there a way round this? I have included a short > snippet to highlight the issue. > > Please advise. Thanks > > <html> > <head> > <script src="lib/jquery/jquery-1.3.2.js" type="text/javascript"></ > script> > <script src="lib/jquery/jquery-ui-1.7.2.js" type="text/javascript"></ > script> > <script type="text/javascript"> > $(document).ready(function() { > $("#redClick").click(function() { > $("#redConsole").toggleClass('red', 0); > return false; > }); > $("#greenClick").click(function() { > !$("#greenConsole").is(":animated") && $ > ("#greenConsole").toggleClass('green', 2000); > return false; > }); > $("#blueClick").click(function() { > !$("#blueConsole").is(":animated") && $ > ("#blueConsole").toggleClass('blue', 2000); > return false; > }); > }); > </script> > > <style> > .red {background-color:red;} > .green {background-color: green;} > .blue{background-color: blue; color:white;} > .button {border: 1px black solid; padding: 2px;} > </style> > </head> > <body> > <div id="redConsole">RED - works for "ALL" browsers</div> > <div id="redClick" class="button">Click Me</div> > <div style="clear:both;height:1em"></div> > <div id="greenConsole">GREEN - works for IE7/8 and FireFox 3</div> > <div id="greenClick" class="button">Click Me</div> > <div style="clear:both;height:1em"></div> > <div id="blueConsole">BLUE - works only for FireFox 3 (This text > should be white)</div> > <div id="blueClick" class="button">Click Me</div> > </body> > </html> > > -- > > You received this message because you are subscribed to the Google Groups > "jQuery UI" group. > To post to this group, send email to [email protected]. > To unsubscribe from this group, send email to > [email protected]<jquery-ui%[email protected]> > . > For more options, visit this group at > http://groups.google.com/group/jquery-ui?hl=. > > > -- You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=.
