CODEWITHSUNDEEP
jquery
Vítor Cabral
Vítor Cabral

Reputation: 3

Fade in fade out on mouse over/out

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>

Upvotes: 0

Views: 2002

Answers (2)

SpYk3HH
SpYk3HH

Reputation: 22570

With proper CSS positioning, and some use of jQuery's .animation, this can be very easy. I've made a jsFiddle to show how easy using your HTML, however I made 2 slight changes. I wrapped the "div1" & "div2" in a "wrapper div", Gave each of the 3 "class names" and positioned them accordingly: wrapper is positioned relative so no inner element "floats out", div1 is normal position (default is static on div tags), and div2 is positioned absolute so that it lays over div 1. I then set the opacity of div 2 to 0 and set its z-index to be 0 as well, while leaving div1 as normal with a z-index of 1. The z-index is really only an issue if you want certain items clickable, otherwise, you can ignore it all together (will past a second jsFiddle without z-indexing). Finally, I use jQuery's .hover() to determine where the mouse is over the wrapper element, and .stop in combo with .animate to "fade in/ fade out" the two inner divs.

See full example here

And without z-indexing here

The slight change to HTML

<div id="news1wrapper" class="fade-wrapper">
    <div id="news1" class="fade-content">
        ...
    </div>
    <div id="news1Over" class="fade-cover">
        ...
    </div>
</div>

The simple CSS

.fade-wrapper {
    position: relative;
}
.fade-content {
    background: #FFF;
}
.fade-cover {
    background: #FFA;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

The little bit 'o jQuery

$(".fade-wrapper").hover(function(e) {
    $(this).children(".fade-content").stop().animate({ opacity: 0 }, 1500);
    $(this).children(".fade-cover").stop().animate({ opacity: 1 }, 1500);
},
function(e) {
    $(this).children(".fade-cover").stop().animate({ opacity: 0 }, 1500);
    $(this).children(".fade-content").stop().animate({ opacity: 1 }, 1500);
});

Upvotes: 0

Kev
Kev

Reputation: 2716

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.
        });
    });
});

Upvotes: 1

Related Questions