Question

I have a stack of images, absolutely positioned on the same place and I only have one image visible at a time by setting zIndex=-1 for all images but the visible one. On another side of the page I have a list of all the image names and when I hover on a specific image name I want that image to become visible by fading in and the previously visible one to fade out. I do this with this code

$(this).hover(  //visible and hover below are variable names  
        visible.css({opacity: '0',zIndex: '-1'}); //the previous image diassapears
        hovered.css({ zIndex: '1', opacity: '1'}); //the new image fades in
    )

and by transitioning the opacity property through css.
The problem is that when I hover over a new image name, the old image just disappears without fading out and the new one starts to fade in. I suppose that the old image does indeed fade out, yet it does so in the background due to zIndex=-1 becoming immediately effective. I would like to ask the best way to solve this. Please, notice that I want to do this without using jQuery animations and only using pure css animations just to take advantage of the (minimally) higher speed of css animations. So a solution that puts almost no computational overhead (so that a css animation in this case still remains advantageous) would be preferable.

Answer 1

You need to apply the z-index:-1 after it has animated back to opacity 0, otherwise it is just “popping” below without showing the opacity change.

You need to trigger on a transitionEnd event. See this SO post about normalizing that event for all browsers.

But once you work that out, its basically just attaching a one off event with the callback setting the final z-index – something like this:

visible.one('transitionEnd', function(){
    visible.css('z-index', -1);
}).css( 'opacity', 0 );

You just need to use the script in the other SO post to get your normalized 'transitionEnd' event.

Hope this helps!