I have two links: an image and a header text. On mouseover of the header or the image, the image should slowly fade into another image and a text below the heading will slowly show up at the same time. On mouseout it should look like it does from the start with a smooth fadeout.

I have made an example of this here. What needs to be solved is that I cannot combine the scripts so that the multiple effects happen at the same time (when mouseover on header or image). Link:

<div id='hover'><a href="">THE RAINFOREST</a></div>
<div id='effect'>There are many animals in the rainforest</div>

</body>

</html>

[CODE]

So when mouseover on header I want a text below to fadein slowly and at the same time the image above will slowly fade into another image. On mouseout slowly fade out and back to normal on both. In the same way when mouseover on image it should slowly fade into another image and simultaneously the text below the header should fadein. On mouseout slowly fade out and back to normal on both.

Since you are already using jquery, there is no need for that fancy function, into which i am too lazy to look anyway :)

I used .animate() rather than .fadeIn().

However, note, that opacity doesn't work for IE8 and below.

02-19-2013, 03:59 PM

pelcones

Excellent. Thank you very much. You made me very happy. It almost worked in IE8 directly, I just needed to add filter: alpha(opacity=0); in the CSS for #pak img and #effect for it to work all the way. Thanks again :-)

02-19-2013, 05:48 PM

haulin

Yeah, you're welcome. I usually use solution suggested by PPK, which is to use opacity, filter and -ms-filter in that order, so it would work in IE8 compatibility mode with IE7.

Also, on top of the comments is a button Thread tools, so mark this as Resolved. :)