#4324 closed bug (duplicate)
animated class transitions in webkit enabled browsers (safari/chrome)
Reported by: | yuval raz | Owned by: | |
---|---|---|---|
Priority: | critical | Milestone: | 1.8 |
Component: | ui.effects.core | Version: | 1.7 |
Keywords: | addClass removeClass | Cc: | |
Blocked by: | Blocking: |
Description
During my attempts to create animated class transitions (.addClass ('class', int)) i have noticed that the animation does not work on webkit browsers (safari, chrome). moreover, once providing the integer for the transition the whole method fails (i.e. - it doesn't even add/remove the desired class to the element).
for the time being i would like to at least be able to regress the method on webkit enabled browsers while attaining the transition animation in FF, Opera and IE.
Attachments (1)
Change History (14)
comment:1 Changed 15 years ago by
comment:2 Changed 15 years ago by
Component: | ui.core → effects.core |
---|---|
Milestone: | TBD → 1.8 |
comment:3 Changed 15 years ago by
Priority: | major → critical |
---|
comment:4 Changed 14 years ago by
Please excuse any mistakes, this is my first time properly adding a fix to a Trac system.
My attachment contains changes in the animateClass method and in the color animation override. The color animation fix is based off of 1.6rc6 as 1.7 still did not work for me in IE6+ and Firefox. As for animateClass(), using a for (var x in [getComputedStyle object]) returns integer indices in WebKit with the expected index instead in the value. Using this value as the index in the getComputedStyle object then returns the correct value.
Fixes confirmed to work in IE6 and 7, Firefox 3+, Opera 9.5+, Safari 3+, and Chrome -- on XP and Vista. Macs and IE8 are untested, and sadly Opera has terrible performance with multiple concurrent class animations.
Changed 14 years ago by
Attachment: | ui.effects.core-1.7-doublerebel.js added |
---|
Contains WebKit style object fixes as well as IE color animation & edge case fixes
comment:5 Changed 14 years ago by
For a demo page using the above fixes, the quickest I could put together is this stripped down frontpage of my site redesign.
comment:6 Changed 14 years ago by
also webkit returns "background-color" instead of "backgroundColor". so animating the background color won't work until we transfer the value of "background-color" to "backgroundColor".
comment:7 Changed 14 years ago by
Had a look at the patch submitted by doublerebel. It works fine in Safari4 (thanks!) - however, animateClass() doesn't appear to work for IE6 or 7. I'm using a simple toggleClass function like so:
$(".disclose-section").bind("click", function() { $(this).parent().toggleClass("disclosable-section-disclosed",100); })
comment:8 Changed 14 years ago by
Just tried Charles' solution and it works great! None of the issues in IE6 or IE7 for me that Justin indicated.
comment:9 Changed 14 years ago by
Will be fixed as part of the dev/effects branch, to be merged to trunk before alpha2.
comment:10 follow-up: 11 Changed 14 years ago by
Hi - I apologise in advance if this is the wrong place to put these comments.
I have implemented the above change in my jquery-ui-1.7.2 with jquery-1.3.2 system. It fixes a problem that I was having in Google Chrome perfectly - but generates a new problem in Internet Explorer 8.
IE 8 returns an "Unspecified error" in the jQuery.extend function, line 589 of jquery-1.3.2.js. The value of name is "outlineWidth" and options[ name ] is "Unspecified error".
Has anyone else found this problem at all?
Thanks
comment:11 follow-up: 12 Changed 14 years ago by
Hi,
Further to my comment on the problem with IE8 - I have some code which reproduces the problem.
The following should toggle the class when the list index is clicked - but in ie8 it gives an unspecified error...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>IE8 test</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="../development-bundle/jquery-1.3.2.js"></script> <script type="text/javascript" src="../development-bundle/ui/ui.core.js"></script> <script type="text/javascript" src="../development-bundle/ui/effects.core.js"></script> <script type="text/javascript"> function initialise() { $('#testul li').click(customOnClick); } google.setOnLoadCallback(initialise); function customOnClick() { $('#' + this.id).toggleClass('toggler',1000); } </script> <style type="text/css"> .toggler { color: blue;} </style> </head> <body> <div> <ul id="testul"> <li id="li1" class="toggler">Test 1</li> <li id="li2">Test 2</li> <li id="li3">Test 3</li> </ul> </div> </body> </html>
comment:12 Changed 14 years ago by
> > $('#' + this.id).toggleClass('toggler',0); >
Setting the animation timer to 0 solves the problem.
Confirmed on Safari 3, Safari 4, latest Webkit and Google Chrome as of March 13, 2009