Script.aculo.us 1.7 beta: Now with Morphing
Written by on November 22nd, 2006 in Ajax News.
Morphing with CSS is all the rage now, and Script.aculo.us has stepped up to the plate with their 1.7 beta release.
The two main features are:
Morphing
Effect.Morph is added to the pack, along with a nice helpful any_element.morph to go with it.
E.g. showing both styles to morph elements using the given CSS:
new Effect.Morph(’error_message’,{
style:’background:#f00; color:#fff;’+
‘border: 20px solid #f88; font-size:2em’,
duration:0.8
});
This will start an effect to morph the div element with id error_message smoothly from whatever border-width currently is set, whatever font-size is set (note the currently set font-size must have the same unit, in this case pt), and whatever color is set to the given new values. Because Effect.Morph queries the original values with Prototype’s Element.getStyle API, it doesn’t matter whether these styles are set inline or in an external stylesheet definition. Of course the effect supports all usual options, like duration or transition.
Element.Transform
This puppy allows you to chain morphations together via an array of tracks.
E.g.
// shrink and fade info messages,
// highlight error messages
new Effect.Transform([
{ ‘#messages li.info’:
‘font-size:1px;height:0px;opacity:0′ },
{ ‘#messages li.error’:
‘font-size:12px;background:#fee;color:#f00′ }
],{ duration: 1.3 }).play();
Source: Ajaxian
Original Article: http://ajaxian.com/archives/scriptaculous-17-beta-now-with-morphing
January 8th, 2007 at 6:22 am
New Scriptaculous 1.7.0 Beta Unveils Morph Effect
With the release of the new Scriptaculous 1.7.0 Beta, Thomas Fuchs has introduced a new effect, morph. The syntax for this new feature is quite easy to grasp. Simply call the function on the element you wish to morph.
$(’my_element’).morp…