On hover, how change several properties with jQuery animation

Question

I have a page full of thumbnail pictures. On hovering over one, I want to enlarge it, without disturbing the layout of the rest of the pictures.

Each picture is in a wrapper div, kept stationary when the pic is enlarged

I can do it with CSS by:

1. changing the z-index from 0 to 1
2. changing the display property to 'absolute'
3. Setting left:0 and top:0 (just in case)

4. Then setting width:340px and height:auto (needed for ie8 I think). CSS

   .wrapper:hover > .Img { width:300px; position: absolute;z-index:1; left:0; top:0; }

But I want to animate the increase in size. I started using: $('.wrapper').hover(function() {... but then read that hover can only have one function.

So I tried mouseenter and mouseleave without success.

What I tried is:

$('.Wrapper.).mouseenter(function()  {
    $('.Img').animate({ zIndex:1 },1,"swing" );                   /* this line works */
    document.getElementsByClassName('.Img').style.zIndex="1";       /*   this doesnt */
    document.getElementsByClassName('Img').style.position="absolute"/*   this doesnt */
    $('.Img').animate({ position:"absolute" },1,"swing");           /*   this doesnt */
    $('.Img').animate({width: '300px', height: '240px'},5000,"swing");
}); 
$("#testXX").mouseleave(function()  {
/*   with the reverse of above */
}); 

Could someone point me in the right direction please.

--- EDITED?ADDED THIS LATER: --- Thanks for your ideas. I've done more research and the issue seems to be:

With javascript, I don't know how to change the position to 'absolute', but I can now change the other properties.

document.getElementById(this).position='absolute';                   doesnt work
document.getElementsByClassName('.Img').style.position="absolute";   doesnt work
$('.Img').animate({ position:'absolute' },001,'swing');              doesnt work!

I guess I could use a mixture of CSS (to do the change to absolute) and Javascript (to do the other animation), but I'm concerned about the sequence/timing causing display effects on the rest of the page.

fyi: The CSS version is here: http://www.frog-records.co.uk/.... or (if solved by the time you read this ) the animated version will be there ;-)

Answer 1

In general: Don't use $(".Img") multiple times. Instead use one of the following:

// Chain your methods, e.g.:
$(".Img").css({position: 'absolute'}).animate({width: '500px'});
// or store it in a var and refer to that
var img = $(".Img"); img.css(/*something*/); img.animate(/*something*/);

I assume you have multiple .Wrapper, each with one image inside, and want to animate only one on hover. But your $(".Img")catches all elements with class "Img" on the whole page. On whatever .Wrapper you hover all images gets animated simultaneously. Instead:

$(".Wrapper").mouseenter(function() {
    $(".Img").animate(/*something*/); // animates all images on the page
    // inside the callback function the keyword 'this' (without quotes!) refers
    // to the one .Wrapper we are actual in. 'this' is called the context of the
    // function. We can pass the context to jQuery as a second argument:

    $(".Img", this).animate(/*something*/)
    // animates only the image of the .Wrapper we are actual in
});

Now I refer to the five lines inside your 'mouseenter' function:

Line 1: You can animate zIndex, because it has a numerical value, but it doesn't make sense. A valid zIndex is an integer (0, 1, 2, ...), but the animation outputs in-between values (like 0.25, 0.33, ...) some browsers may fail with. Set zIndex with .css or .style.

Line 2, Line 3: .getElementsByClassName() returns a NodeList (= a list with elements inside). The list itself has no style property. If you want to set style on elements inside this list, you must iterate over it.

var list = document.getElementsByClassName(".Img"), length = list.length;
for(var i = 0; i < length; i++) list[i].style.position = "absolute";

Line 4: Its impossible to animate position property. Position may be 'static', 'relative', 'absolute' or 'fixed', but contains no animatable number.

Line 5: should work! So your 'mouseenter' function may look like:

$(".Wrapper").mouseenter(function() {
    $(".Img", this).css({zIndex: 1, position: 'absolute', left: 0, top: 0})
                   .animate({width: '340px', height: '240px'}, 5000, 'swing');
});

At last: all functions relying on a single event ('mouseenter', 'click', ...) take only one function as their argument (callback). That means:

$("selector").mouseenter( /* Here you can pass only one function in */ );
// that looks like:
$("selector").mouseenter(function() { /* do something */ }); // but:
$("selector").mouseenter(function() {
    /* do something */ // means:
    // inside this single callback that is passed to a single-event-function
    // you can do what you want and call as much functions you need.
});

'hover' is not a single event but the state between the mouseenter event and the mouseleave event. Thats why jQuery's .hover() is a shortcut for both mouseenter and mouseleave events together. It takes one or two callback functions and looks like:

$("selector").hover(function1, /* optional */ function2);

If there's only function1 it gets called when mouseenter fires and called again when mouseleave fires. If there are two callbacks function1 is called on mouseenter and function2 on mouseleave. Inside these both you can do anything like explained before.

At very last: In your code you attach the 'mouseleave' function to another element called #testXX. If you get some more problems, please update your question with the significant parts of your html.

Answer 2

Why not:

$('.Wrapper').hover({function(){
    $(this).animate({
        position: 'absolute',
        /* etc */
    });
});