mootools | overwrite propery of a tween without create new tween everytime

Is there a way to overwrite the property of a tween? If I write

el.set('tween', {duration: ‘long’, onComplete: 开发者_JS百科callback});

and then

el.set('tween', {duration: 200, onComplete: secondcallback });

I can’t replace the old property (callback is triggered again)

Is possible to solve this problem without the creation of a new Fx.Tween everytime?

Each time you set onComplete on the same instance, callbacks are pushed and associated with the same 'complete' event and each callback will be called after the event is fired.

To 'replace' the onComplete callback, you could use removeEvent, i.e.

el.set('tween', {duration: ‘long’, onComplete: callback});

//and then...

el.get('tween')
    .removeEvent('complete', callback)
    .addEvent('complete', secondcallback);

demo => http://jsfiddle.net/NNzQ7/

I would create two independent tweens and keep them around:

var fx1 = new Fx.Tween(element, {onComplete: callback});
var fx2 = new Fx.Tween(element, {onComplete: anothercallback});

And then you can use them individually:

fx1.start('background-color', 'cyan', 'red');
fx2.start('background-color', 'red', 'cyan');