Fade in, Fade out Divs

Question

I'm trying to build a webpage that is essentially one page, but with four 'hidden' divs that will fade in and out of visibility when you click on menu buttons along the bottom.

I would like to put a 'close' button at the top of each of these divs so you can 'close' that div - but it would be great if the div still faded out on its own when a new menu item is clicked. So far I've created the div boxes and the links using css and html, but I'm an absolute newbie when it comes to javascript. Here's the code I have so far

HTML:

<div class="menu">
    <a class="portfolio" href="http://www.google.com"> Portfolio </a> | <a  class="aboutme" href="http://www.google.com"> About Me </a> | <a class="education" href="http://www.google.com"> Education</a> | <a class="contact" href="http://www.google.com"> Contact</a>
</div>
<div>`

(NOTE: I only put google as the link target because I didn't know what else to put).

CSS:

.aboutmewindow
{
    width:583px;
    height:557px;
    border-bottom-style:dashed;
    position:absolute;
    top:0px;
    z-index:2;  
}

.portfoliowindow
{
    width:583px;
    height:557px;
    border-bottom-style:dashed;
    position:absolute;
    top:0px;
    z-index:2;  
}

.educationwindow
{
    width:583px;
    height:557px;
    border-bottom-style:dashed;
    position:absolute;
    top:0px;
    z-index:2;  
}

.contactwindow
{
    width:583px;
    height:557px;
    border-bottom-style:dashed;
    position:absolute;
    top:0px;
    z-index:2;  
}`

I've tried writing a little bit of the javascript on my own, but it's seriously out of my depth at this point. I'm going to keep going through tutorials though, so hopefully I'll get the hang of it.

Anyone have any suggestions? Or good tutorials?

Thanks!

Answer 1

you can try this its a simple example but without all your markup and code you can get the idea .. requires jQuery

http://jsfiddle.net/YnzRV/9/

$(function(){

    $("#main > .box").not(":first").hide();

    $(".menu").on("click", "a", function(){

        var $this = $(this),
            dataBox = $this.data("box");

        $("#main > .box").hide();
        $("."+dataBox).fadeIn(400);

        return false;
    });

});

if you check the jsfiddle you will see how i added data attributes that get passed through the click handler to tell it which div to show using the data attributes

Answer 2

You can use fadeIn() or fadeOut() .

Use it like this:

$('selector').fadeIn(); // you can use time in ms, inside ()

Similarly, you can use fadeOut too. But keep in mind, that you have the latest version of jQuery linked to your web page.

Links:

http://jquery.com

Answer 3

This is a slightly outdated (August, 2012) tutorial showing you the HTML, CSS, and JavaScript required to fade elements in, fade them out, and fade them to a specific opacity.

http://www.mkyong.com/jquery/jquery-fadein-fadeout-and-fadeto-example/

You're essentially trying to learn about the following:

• .fadeIn()
• .fadeOut()
• .fadeTo()
• jQuery's .click() handler
• jQuery's .on() handler