javascript - Jquery 显示/隐藏 div - 修复重叠动画

Question

我正在使用 JS 通过单击带有 jquery 函数 fadeIn() 和 fadeOut() 的侧导航来显示/隐藏 div。我遇到的问题是当一个 div 淡出时，下一个 div 同时淡入。此外，如果我单击已显示的 div 的链接，它会淡出并再次淡入。我不确定 IF 语句是否是进行两个修复的最佳方法:
1.让显示的div在下一个开始淡入之前完全淡出。
2. 如果单击相同的链接，当前显示的 div 将不会淡出/淡入。

这是我到目前为止所拥有的(没有我对 IF 语句的失败尝试):
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);
    });
});

Answer 1

要链接动画，请将 fadeIn 放在 fadeOut 的回调中，如果当前显示该函数，则取消该函数，检查 div 是否已经可见。

我还必须添加检查以查看当前 .infozone div 是否可见 - 否则 fadeOut 也适用于隐藏元素，并且回调多次触发:

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