How to do gradual alpha image swap with JS & TweenMax?

[cerulean 3 Likes (Newbie)]

I'm trying to figure out the best practice for an image swap. I'm coming from AS, new to JS, but I have a basic idea of what to do -- and nothing seems to work.

 

I'm trying to use the old 'make a UL inline for a horizontal menu' trick --

 

I ran through all of these options but couldn't get any to work

 

1) loaded both images into the <li> with different z-indexes, thinking that I'd TweenMax the top image to 0 opacity on rollover -- even with float:left they sat next to each other not on top of each other.

2) I set the "over" image as the background with CSS and put the "out" image in the <li> and then tweened the "out" image to 0 opacity on rollover. Somehow this seemed to collapse the box -- the background image wasn't displayed when the front was invisible -- this seemed to be a result of the 'display:inline'

 

The easiest thing is to simply swap 'src' on rollover -- but I'm looking for a gradual transition. Any suggestions? I know it's hard to talk about what I'm doing/not doing without my code, but in lieu of that, if someone could provide a sample, or a link, that would be helpful.

 

Thanks!

[Rodrigo 3,484 Likes (Superhero)]

Hi,

 

You should give your img tag an absolute position and a z-index of 0, and the content on your li (I'm going to presume that you're making a menu) a bigger z-index, like this:

 

<style>
img{
position: abosolute;
top:0;
left:0;
z-index:0;
}
li a{
z-index:5;
}
li a:hover{
z-index:5;
}
</style>

 

With that code you got one in top of the other and the code above them, after that you just have to create your events and handlers in order to achieve the effect.

 

Check this fiddle, is not the same thing but is pretty close http://jsfiddle.net/4ALZb/6/.

 

Hope this helps,

Cheers,

Rodrigo.

[jamiejefferson 1,193 Likes (Superhero)]

Rodrigo has the trick sorted. For a specific implementation, try this: http://jsfiddle.net/g5YQe/

 

Just give background-images to the .img divs and you're good to go. Sorry about the jQuery if you're not a fan of that, but I'm sure you can sort out the alternative if needed.

[cerulean 3 Likes (Newbie)]

___ CORRECTION: one of the links doesn't have the code I was looking for, I'll look at other -- missed the first

 

Thanks to all — the code looks cool but it doesn't seem to actually contain the <img> tags, either within the content or as background. Can someone point me to something that explicates that?

 

(I copies the code from the link and tried it in my own doc -- can't get it to work as is -- the <li> dots are still there (I know how to get rid of them but wonder why they don't appear in the sample window on jsfiddle) and the js isn't working (yet)). I'll keep fiddling.

 

But back to the first point -- it's the <imgs> themselves that are giving me headaches, I can tween the <li>'s ok, but want to swap <img>s gradually. Thanks!