#4324 closed bug (duplicate)

Opened March 11, 2009 09:11AM UTC

Closed September 18, 2009 03:17AM UTC

Last modified January 17, 2010 06:08AM UTC

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 (13)

Changed March 13, 2009 09:12PM UTC by fsvehla comment:1

Confirmed on Safari 3, Safari 4, latest Webkit and Google Chrome as of March 13, 2009

Changed March 18, 2009 10:47AM UTC by rdworth comment:2

component: ui.core → effects.core
milestone: TBD → 1.8

Changed March 18, 2009 10:47AM UTC by rdworth comment:3

priority: major → critical

Changed March 29, 2009 02:02AM UTC by doublerebel comment:4

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 March 29, 2009 05:07PM UTC by doublerebel comment:5

For a demo page using the above fixes, the quickest I could put together is this stripped down frontpage of my site redesign.

Changed March 30, 2009 12:03PM UTC by narkaT comment:6

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".

Changed April 01, 2009 05:29AM UTC by justinsincl comment:7

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);
})

Changed July 09, 2009 02:26PM UTC by rodboev comment:8

Just tried Charles' solution and it works great! None of the issues in IE6 or IE7 for me that Justin indicated.

Changed August 05, 2009 05:16PM UTC by jzaefferer comment:9

Will be fixed as part of the dev/effects branch, to be merged to trunk before alpha2.

Changed August 19, 2009 09:33PM UTC by markrand comment:10

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

Changed September 07, 2009 10:04PM UTC by markrand comment:11

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>

Changed September 07, 2009 10:19PM UTC by markrand comment:12 

> 
>     $('#' + this.id).toggleClass('toggler',0);
>

Setting the animation timer to 0 solves the problem.

Changed September 18, 2009 03:17AM UTC by scottgonzalez comment:13

resolution: → duplicate
status: new → closed

Duplicate of #3112.