[jQuery] Re: Animated resize of a thumbnails inside a table

> I'm (still) trying to create a hover effect over a thumbnail image, a
> simple animated grow is what I'm looking for.
> Has anyone done this and is interested to share some insight?
> I'm tripping on the first step, changing the thumbnail position to
> absolute (of 4 major browsers that I'm using to test the site, every
> one of them has a different idea of where the thumbnail top and/or
> left position should be.
>
> This is what I've got so far:
>
> $(".dlPicturesImg").bind("mouseenter", function() {
>                 // if (bResizing) return;
>
>                 var parDivWidth = $(this).parent().width();
>                 var parDivHeight = $(this).parent().height();
>                 var tmbWidth = $(this).outerWidth();
>                 var tmbHeight = $(this).outerHeight();
>                 var newTmbWidth = Math.round(tmbWidth * 1.2);
>                 var newTmbHeight = Math.round(tmbHeight * 1.2);
>                 var newLeft = Math.round((parDivWidth / 2) -
> (newTmbWidth / 2)) + "px";
>                 var newTop = "-" + Math.round(newTmbHeight / 2) +
> "px";
>
>                 prevTmbWidth = $(this).width();
>                 prevTmbHeight = $(this).height();
>
>                 $("#txaDebug").val($("#txaDebug").val() + "over" + "
> nw:" + newTmbWidth + " nh:" + newTmbHeight + " nt:" + newTop + " nl:"
> + newLeft + "\n");
>
>                 var pos = $(this).position();
>
>                 $(this).css({ top: "-" + Math.round(parDivHeight / 2)
> + "px", left: pos.left, position: "absolute" });
>                 /* $(this).css("left", newLeft);
>                 $(this).width(newTmbWidth);
>                 $(this).css("top", newTop);
>                 $(this).height(newTmbHeight);*/
>
>                 //bResizing = true;
>                 //$(this).animate({ top: newTop, left: newLeft, width:
> newTmbWidth, height: newTmbHeight });
>
>                 return false;
>
>             });

Here's an example that may help:

http://www.malsup.com/jquery/cycle/thumbs.html