Daiv You will need to cancel the previous transition or stop it before you start the next one
Maybe add on onStart property in there to stop the opposite action I actually did mine a different way and looped over the elements and added the fx function directly to the element which binded to an external function. I found i had more control over it that way. Steve -----Original Message----- From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of Daiv Mowbray Sent: Wednesday, 19 November 2008 5:41 AM To: MooTools Users Subject: Morphing tooltips hello list, I am trying to make an animated tooltip. The following works well enough, but I think there must be a better way to do this. I use the tip.fade('in'); and out, followed by a "this.fxopen = new Fx.Morph(this.tip)" however, if a tip is in morph transition when the users mouse changes to a different link, the new tip object remains hidden. To try and prevent this, I have added a second Fx.Morph(this.tip) to close faster than opened. The css is also bellow to show you the intended changes / or animation. Thanx for any suggestions. *** js code **** var myTips = new Tips($$('.tool'), { className: 'customTipClosed', showDelay : 350, hideDelay : 100, offsets: {'x': -290, 'y': 0}, fixed: 'true', initialize:function(){ this.fxopen = new Fx.Morph(this.tip, { duration: 750, transition: Fx.Transitions.Sine.easeInOut}); this.fxclose = new Fx.Morph(this.tip, { duration: 150, transition: Fx.Transitions.Sine.easeInOut}); }, onShow: function(tip) { tip.fade('in'); this.fxopen.start('.customTip','.customTipClosed'); }, onHide: function(tip) { tip.fade('out'); this.fxclose.start('.customTipClosed', '.customTip'); } }); *** css *** .customTip{ margin-left:0px; margin-top:0px; width: 280px; overflow: hidden; } .customTipClosed{ margin-left:-60px; margin-top:-60px; width: 0px; overflow: hidden; } ---------- Daiv Mowbray
