CODEWITHSUNDEEP
javascriptjqueryhtmlfade
Ricki
Ricki

Reputation: 943

create a fadeout effect on div

im having trouble with creating this.

Im using jQuery as my main JS library. I wanted to use the fade() function to create a div, which when rolled-over would fade to show content underneath.

Say for instance a div with grey background with an image on top, which would fade to reveal content underneath. Is this possible? Im not very good with JS/jQuery

Upvotes: 0

Views: 478

Answers (2)

anothershrubery
anothershrubery

Reputation: 21003

Something like this http://jsfiddle.net/dkpgQ/2/ ?

EDIT: code...

HTML

<div id="container">
    <div id="content">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 
    </div>
    <div id="overlay">
    </div>
</div>

Javascript

$("#overlay").mouseover(function() {
   $("#overlay").fadeOut("slow"); 
});

CSS

#container {
    position:relative;
    width:200px;
}

#overlay {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-color:grey;
}

Upvotes: 2

Ghyath Serhal
Ghyath Serhal

Reputation: 7632

You can use jquery

$('#book').fadeOut('slow', function() {
   // Animation complete.
});

This link contains more explanation.

Or you can use the jquery animate function as explained in this link

Upvotes: 1

Related Questions