Response title
This is preview!
Mouse over move away effect
in Using jQuery
•
13 years ago
Hey guys,
I am trying to duplicate the effect that can be found at http://www.hubltd.com/ under the work link. And this is what I have so far http://figureadesign.com/dev/portfolio.htm. Not quite turning out the same way.
So this is what I have http://pastebin.com/jpBjTjy9 (not the same code at the link above):
I start out by getting the top, left, bottom and right coordinates of each image lines 38 - 49
On mouse enter of each image I grab all the sibling images and put all the images the are to the left, right, top and bottom of that image into any array. lines 56 - 89
On mouse move on that same image I am figuring out the x and y of the mouse within that image by doing lines 121 - 189
And then on mouse out I reset everything. lines 90 - 120
So I guess these are my questions:
- What's the proper math to say that my mouse is X% into the image? So, if my mouse is dead center is 100% but if I am between the dead center point and the bottom right corner the percentage returned is between 0 and 100%.
- I am using .stop().animate() with an easing of "easeInOutQuad" and does not seem responsive enough, what's a better approach.
- Is the code at http://pastebin.com/jpBjTjy9 efficient enough or should I be doing something different?
1