Question

i have “div1” and “div2”, for example. and the ‘div2’ is hidden behind ‘div2’, and i want to fade in the div2 over the de div1 with a fade…
how can i do this?
i looked trought so many posts, and none of them gave me any result…

<div id="news1">
    <table width="100%" height="145" border="0" cellpadding="0" cellspacing="0" class="newsBox">
        <tr>
            <td align="center">
                <table width="230" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td width="89" align="center" valign="top" class="shadow"><img src="images/news_03.jpg" width="89" height="89" /></td>
                        <td align="left" valign="top" class="espacoEsquerda">Duis felis magna, viverra ac dignissim at, mollis vitae felis.  Praesent eleifend dictum quam tempor lobortis.</td>
                    </tr>
                    <tr>
                        <td height="41" align="left" valign="bottom"><img src="images/news_10.jpg" width="35" height="35" /></td>
                        <td align="right" valign="bottom" class="readmore">read more »</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

<div id="news1Over">
    <table width="100%" height="145" border="0" cellpadding="0" cellspacing="0" class="newsBoxOver">
        <tr>
            <td align="center">
                <table width="230" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td width="89" align="center" valign="top" class="shadow"><img src="images/news_03.jpg" width="89" height="89" /></td>
                        <td align="left" valign="top" class="espacoEsquerda">Duis felis magna, viverra ac dignissim at, mollis vitae felis.  Praesent eleifend dictum quam tempor lobortis.</td>
                    </tr>
                    <tr>
                        <td height="41" align="left" valign="bottom"><img src="images/news_11.jpg" width="35" height="35" /></td>
                        <td align="right" valign="bottom" class="readmoreOver">read more »</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

Answer 1

I’ve created a jsFiddle for you to play with. I’ve used mouseevents to trigger the fades. don’t know if this is what you want but it proves the concept.

Does it do what you need?

http://jsfiddle.net/2yERV/6/

$(function() {
    $('#wrap').mouseenter(function() {
        $('#news1Over').fadeOut('slow', function() {
            // Animation complete.
        });
        $('#news1').fadeIn('slow', function() {
            // Animation complete.
        });
    })
    .mouseleave(function() {
        $('#news1Over').fadeIn('slow', function() {
            // Animation complete.
        });
        $('#news1').fadeOut('slow', function() {
            // Animation complete.
        });
    });
});