Prototype effect.tween moving box problem

Hi

I am trying to create a box that uses a mouseover effect on 3 headings to reveal the content relevant to taht heading. I have written a function that does this quite well but I'm finding that the boxes jump around a bit when the mouse is moved arounf. The function that I have written is -

function moveTheBox (id,sI,fI,rI) {
      var a1 = parseInt($(id).getStyle('top').replace('px',''));
      if (rI == 1) {
            if (a1 > fI) {
                  var d = (a1 - fI - 100)/100;
                  new Effect.Tween(id, a1, fI, { duration: d} , function(p) { this.setStyle({top : p+'px' }) } );
            }
      }
      else {
            if (a1 < sI) {
                  var d = (sI - a1 - 100)/100;
                  new Effect.Tween(id, a1, sI, { duration: d} , function(p) { this.setStyle({top : p+'px' }) } );
            }
      }
}

the sI and fI variables are the start and end position of eaxh box. The (kind of) working model and source is available here-

http://www.ihabitat.co.uk/move_box.php

Any help would be much appreciated!!

Many thanks

Matt
BigshowmgAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

limweizhongCommented:
doesn't "jump around" for me in Firefox.
0
BigshowmgAuthor Commented:
Thanks for your response. As the boxes are moving if you move your mouse up and down so it goes outside the header (mouseover) area and back in it causes then to freak out a bit.

I'm also using Firefox.

Thanks again

Matt
0
limweizhongCommented:
I get what you may mean now... seems to me that you should clear the timeouts whenever a new timeout is created. But unfortunately, it would be troublesome to inspect the code in effects.js (you could try finding a method that can remove/delete/clear the effect from the reference). I do this sort of things using my own code, so in my case I would know how to handle it.
0
limweizhongCommented:
It looks like (to me) you can't make it perfect with the pre-built functions available in effects.js
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.