Jquery show/hide divs

I am using JS to show/hide divs via clicking on the side nav with jquery functions fadeIn() and fadeOut(). The problem I run into is as one div fades out, the next is fading in simultaneously. Also, if I click the link for the div that is already shown, it fades out and fades in again. I'm not sure if an IF statement would be the best approach to do two fixes:
1. Let shown div fully fadeOut before next starts to fadeIn.
2. Currently shown div will not fadeOut/In if same link is clicked.

Here is what I have thus far (without my broken attempt at an IF statement):
http://jsfiddle.net/k55Cw/1/

HTML:

<div class="container">
    <header>
        <ul class="sidenav">
            <li><h2><a data-region="nav-1" href="#">About</a></h2></li>
            <li><h2><a data-region="nav-2" href="#">Services</a></h2></li>
            <li><h2><a data-region="nav-3" href="#">Team</a></h2></li>
            <li><h2><a data-region="nav-4" href="#">News</a></h2></li>
            <li><h2><a data-region="nav-5" href="#">Contact</a></h2></li>
        </ul>
    </header>
    <div id="nav-1" class="infozone"><p>Hello I'm box 1.</p></div>
    <div id="nav-2" class="infozone"><p>Hello I'm box 2.</p></div>
    <div id="nav-3" class="infozone"><p>Hello I'm box 3.</p></div>
    <div id="nav-4" class="infozone"><p>Hello I'm box 4.</p></div>
    <div id="nav-5" class="infozone"><p>Hello I'm box 5.</p></div>
</div>

CSS:

.infozone{
    float:left;
    height:400px;
    width:800px;
    background-color: #000;
    display:none;
}

JS:

$(document).ready(function() {
$('.sidenav a').click(function(){
    $('.infozone').fadeOut(850);
    var region = $(this).attr('data-region');
    $('#' + region).fadeIn(850);
    });
});

---

to chain the animations put the fadeIn inside the callback for fadeOut , and to cancel the function if it's currently shown, check if the div is already visible.

I've also had to add a check to see if the current .infozone div is visible - or else the fadeOut applies to hidden elements too, and the callback fires multiple times:

$(document).ready(function() {
    $('.sidenav a').click(function(){
        var region = $(this).attr('data-region');
        var $region = $('#' + region);
        if ($region.is(':visible')) return;

        var $infozone = $('.infozone:visible');

        if ($infozone.length === 0) {
            $region.fadeIn(850);
        } else {
            $infozone.fadeOut(850, function() {
                $region.fadeIn(850);
            });
        }
    });
});

---

You could something like that:

html This make you page works when javascript is disabled:

<header>
    <ul class="sidenav">
        <li><h2><a href="#nav-1">About</a></h2></li>
        <li><h2><a href="#nav-2">Services</a></h2></li>
        <li><h2><a href="#nav-3">Team</a></h2></li>
        <li><h2><a href="#nav-4">News</a></h2></li>
        <li><h2><a href="#nav-5">Contact</a></h2></li>
    </ul>
</header>

note that the href point to the id you want to show. This will works also for screen reader if you want to make your page accessible.

javascript. I have not tested it, you might have to fix few things, but the idea is there

$(document).ready(function() {
    $('.sidenav a').click(function(e){

    var href = $(this).attr('href');

    // prevent default 
    e.preventDefault();

    // prevent clicked twice
    if(!$(this).hasClass('active'){
       $('.sidenav a').removeClass('active');
       $(this).addClass('active'){
       $('.infozone').fadeOut(850);
       $(href.substring(1)).fadeIn(850);
    }


});

You should also consider adding some ARIA attributes and roles attributes.

链接地址: http://www.djcxy.com/p/64762.html

上一篇: 如何在JS中淡出图像？

下一篇: jquery显示/隐藏div