jquery fadein和fadeout同时出现

Question

我想制作类似菜单的东西,所以每个菜单项包含不同的内容,但我不想要页面重新加载.所以我做了这样的事情.

$(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);
    });
});?

现在......我相信这可能会更清洁和简化,但我想不出任何事情.我基本上是jQuery的新手......

一切都很好,但我有两个问题.1)你能让这个剧本更清洁吗？2)你能告诉我如何同时加载内容...目前当主页加载并点击下载时,它会在fadeIn时跳转...

Answer 1

您可以使用对象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);
});