In your code, it looks like you use many calls to $(this) and
$("#times_zoom"). You'll get much better performance if you set variables
and use those instead, i.e in your mouseover function:
var th = $(this), tz = $("#times_zoom");
Then you would use those references like so:
// change the contents
tz.html(th.html());
This will improve performance because you are not calling the jQuery
function as many times.
-- Josh
----- Original Message -----
From: "gr00vy0ne" <[EMAIL PROTECTED]>
To: "jQuery (English)" <jquery-en@googlegroups.com>
Sent: Monday, May 05, 2008 6:15 PM
Subject: [jQuery] suggestions for a hover zoom on text...
I'm trying to come up with a technique for expanding text when you
hover over it. I built a real quick and dirty demo to help explain the
affect I'm trying to achieve:
http://imlocking.com/projects/zoom_text.html
So, in the list of times, I'd like to make them "pop" when you hover
over. Of course, it would be easy to change the style of the element
directly but then the list would move which I'm trying to avoid.
What I'm doing now is creating a hidden positionable container that
moves to the correct location and shows a copy of the hovered element
(with a different style applied). It works but I've noticed on an
actual page with other content, the performance can get horrendous.
Safari is blazing fast. Both Firefox and IE can both go up to 100% CPU
usage.
All the code (HTML/CSS/JS) is inline. So, please take a look and let
me know if there's a better more efficient way to do this. Any
suggestions, tips, comments, etc. are welcome.
Another alternative we've tried is putting hidden spans in the page
that show up on hover (requires little-to-no scripting) but it ends up
marking the markup unnecessarily large.
Many thanks,
victor
