Thomas Fuchs
Hi, I'm Thomas Fuchs. I'm the author of the script.aculo.us user interface JavaScript library, a member of the Prototype core team and a Ruby on Rails core alumnus.
You're using my JavaScript work every day, even if you're not aware of it!
@thomasfuchs on Twitter    Need consulting, corporate training or want me to speak at your conference? Contact me!

script.aculo.us 1.7 beta demos

November 21st, 2006

Go to the main blog entry on the script.aculo.us 1.7 beta.

Element.morph

How easy is that?



$('morph_example').morph('background:#080;color:#fff');





Effect.Morph

Effect.Morph 

1
2
3
4
5
6
7
8
9

new Effect.Morph('error_message',{
  style:'background:#f00; color:#fff;'+
    'border: 20px solid #f88; font-size:2em',
  duration:0.8
});

// same thing with Element morph is
$('error_message').morph('background:#f00; color:#fff;'+
  'border: 20px solid #f88; font-size:2em',{duration:0.8});


Effect.Transform

  • First info message
  • Second info message
  • First error message
  • Third info message
  • Second error message
1
2
3
4
5
6

new Effect.Transform([
  { "#messages li.info":
      "font-size:1px;line-height:0px;height:0px;opacity:0;padding:0px" },
  { "#messages li.error":
      "font-size:15px;background:#f00;color:#fff" }
],{ duration: 0.6 }).play();