Queuing Scripty2 animations

The docs say that adding position: end queues animations one after the other. Right?

But then something like this doesn’t work:

$('box').morph('height:100px', {duration:3, position:'end'});
$('box').morph('background-color:red', {duration:3, position:'end'});
$('box2').morph('开发者_如何学Gobackground-color:pink', {duration:3, position:'end'});

→ http://jsfiddle.net/kf8Ys/

The second box turns pink when it’s supposed to wait for the first box to turn red. Have I missed something?

You can simply chain morphs like this:

$('box').morph('height:100px', {duration:3}).morph('background:#ff0000', {duration:3});

Also, you have to write 'background:#ff0000' and put the background-color in the style attribute of your boxes, otherwise you will never be able to change the BG via js.

Here's your edited exapmle: http://jsfiddle.net/Vhy8e/

Update: If you want to make #box2 to turn red after the first 2 morphs finished: http://jsfiddle.net/W5w6S/