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;

            });

Reply via email to