Update: A better solution, which enables more than one effect to be used is Effect.Queues.

I recently used scriptaculous at work to provide some animation effects in a product. Specifically using Effect.Opacity(). However I ran into a problem in all browsers, on both Windows and Mac OS X, where the page element would flicker during the opacity change. My code went something like this:

changeItem: function(container, item) {

	var html = '<div>' + item['title'] + '</div>';

	new Effect.Opacity(
		container,
		{ from: 1, to: 0, duration: 0.5 }
	);
	container.innerHTML = html;
	new Effect.Opacity(
		container,
		{ from: 0, to: 1, duration: 1 }
	);

},

After reading about bugs in Firefox where I had to set the opacity to 0.99 instead of 1; or setting the background color, width and height to the elements that I was applying these effects on, I eventually solved it doing this:

changeItem: function(container, item) {

	var html = '<div>' + item['title'] + '</div>';

	container.setStyle({opacity: 0});
	container.innerHTML = html;
	new Effect.Opacity(
		container,
		{ from: 0, to: 1, duration: 1 }
	);

},

The first effect I was applying was not running in sequence - I mistaken assumed it would. These two effects either side of the innerHTML statement were fighting one another. Removing the first didn’t change the visual effect much and cured the flickering! Pass it on.

I had cause to use script.aculo.us at work today, which depends on the Prototype framework. I’ve used Prototype previously (in fact on this very blog!). However, when I dropped script.aculo.us in on the site I was working on, all hell broke loose with my JavaScript breadcrumbs.

I was dynamically populating two arrays via PHP, one for the page captions and the other for the page URLs, JavaScript was then used to combine these arrays by way of Array.push() and Array.join(). After a few minutes debugging I realised Prototype was the culprit, spewing out a wad of JavaScript source all over the page header (innuendo not intended!).

A few more minutes Googling and I’d discovered it was Prototype’s Array extensions at work that had broken things. As explained by David Bergman iterating over an Array using a for (i in array) reveals the extensions added to Array class.

The author of Prototype (being a “Rubyan”) added these extension to bring JavaScript a little closer to home for the rest of the Ruby community. Converting my for to Array.each() remedied the problem - worth noting for future reference and hopefully this will save someone else 10 - 15 minutes head scratching. Thanks to David for his fine explanation and solution to the problem!