Opened 14 years ago

Closed 14 years ago

Last modified 13 years ago

#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)

ui.effects.core-1.7-doublerebel.js​ (21.7 KB) - added by doublerebel 14 years ago.
Contains WebKit style object fixes as well as IE color animation & edge case fixes

Download all attachments as: .zip

Change History (14)

comment:1 Changed 14 years ago by fsvehla

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

comment:2 Changed 14 years ago by rdworth

Component: ui.core → effects.core
Milestone: TBD → 1.8

comment:3 Changed 14 years ago by rdworth

Priority: major → critical

comment:4 Changed 14 years ago by doublerebel

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 doublerebel

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 doublerebel

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 narkaT

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 justinsincl

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 rodboev

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 Jörn Zaefferer

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

comment:10 Changed 14 years ago by markrand

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 in reply to:  10 ; Changed 14 years ago by markrand

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 in reply to:  11 Changed 14 years ago by markrand 

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

Setting the animation timer to 0 solves the problem.

comment:13 Changed 14 years ago by Scott González

Resolution: → duplicate
Status: new → closed

Duplicate of #3112.

Note: See TracTickets for help on using tickets.