• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 664
  • Last Modified:

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
0
Bigshowmg
Asked:
Bigshowmg
  • 3
1 Solution
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now