In Scriptaculous 1, you could animate styles:
new Effect.Morph('id', {
style: { background: tomato },
duration: '4' });
But a better way was to keep the CSS and JS separate and merely reference a class:
new Effect.Morph('id', {
style: 'important',
duration: '4' });
Marvellous. But this doesn’t seem to work with the new Scripty 2. Works:
$('id').morph('background: tomato', { duration: 4 });
Breaks:
$('id').morph('important', { duration: 4 });
What is the right way to animate using a class in Scripty 2? (I suspected Style, but the docs were vague.)
I checked out the source code and s2 only takes ‘styleProp:value’ for the style option. The string needs to have a colon.
The only method that will additionally take the class name as well ‘styleProp:value’ for the style option is a method called S2.FX.Operators.WebkitCssTransition. However, the S2.Extensions.webkitCSSTransitions are turned off by default. Although, the code in that method to be used to make your own patch to the .Morph method.