Geek asks and answers

Jquery fadein and fadeout at the same time

I want to do something like a menu, so each menu item contains different content, but I do not want to reload the page. So I did something like this.

$(document).ready(function() {
    var $hide = $('div#hide'),
        $home = $('div.home'),
        $download = $('div.download'),
        $about = $('div.about'),
        $contact = $('div.contact');

    $hide.css('display', 'none');

    $('a.home').on('click', function() {
        $hide.fadeOut();
        $home.delay(300).fadeIn(2000);
    });

    $('a.download').on('click', function() {
        $hide.fadeOut();
        $download.delay(300).fadeIn(2000);
    });

    $('a.about').on('click', function() {
        $hide.fadeOut();
        $about.delay(300).fadeIn(2000);
    });

    $('a.contact').on('click', function() {
        $hide.fadeOut();
        $contact.delay(300).fadeIn(2000);
    });
});​

Now ... I believe this might be cleaner and simplified, but I can't think of anything. I'm basically new to jQuery ...

Everything works fine, however I have two questions. 1) Can you make this cleaner script a bit? 2) Can you tell me how to download content at the same time ... Currently, when it loads home, and I click the "Download" button, it seems to be downloading, and fadeIn ...

+5
source share
2 answers

preventDefault() event, .

$('a.home, a.download, a.about, a.contact').on('click', function(event) {
    event.preventDefault();
    var cls = this.className;
    $hide.fadeOut();
    $('.'+cls).delay(300).fadeIn(2000);
});
+2

HTML, , , :

, href , , .

HTML

<nav>
    <a href="#home">Home</a>
    <a href="#download">Download</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
</nav>

<div id="container">

    <div id="home">
        Home
    </div>

    <div id="download">
        Download
    </div>

    <div id="about">
        About
    </div>

    <div id="contact">
        Contact
    </div>

</div>

JavaScript

$(function(){
    var $menuItems = $('nav a'),
        $container = $("#container");

    $menuItems.on('click', function(e) {
        e.preventDefault();
        $(this.hash, $container).delay(300).fadeIn(1000).siblings().fadeOut(1000);
    }).first().click();
});​

, . , hide, , .

+2

More articles:


All Articles