0

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.

Nikolaos Kakouros
  • 522
  • 6
  • 11

2 Answers2

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!

Community
  • 1
  • 1
sic1
  • 486
  • 3
  • 8
  • Great. But what about any computational burden? Does this method still renders css transitions faster than jQuery animations? – Nikolaos Kakouros May 03 '12 at 00:28
  • Well, by running a css transition, the animation is now hardware accelerated - so that it looks better. And I think they look a lot better. I have not specifically run into performance issues with this method, it really should be better than just doing a jQuery animation because a jQuery animation is just setting the css of opacity a bunch of times to make it animate - css transition is handled by the browser itself, making it more smooth. – sic1 May 03 '12 at 00:32
  • 1
    I guess a better question is are you (or your client) going to be upset if your animations do not work in ie7 and 8. If that is a problem, you either need to use jquery animation or look into further polyfills - i have seen some that will fill with a setTimeout to run the transition callback if you are on an old browser that does not support transition events. – sic1 May 03 '12 at 00:36
0

use animate - it comes with queue management and callback support "out of the box"

http://api.jquery.com/animate/

Brandt Solovij
  • 2,124
  • 13
  • 24