Jquery显示/隐藏divs修复重叠动画

Question

我使用JS通过点击带有jquery函数fadeIn()和fadeOut()的侧面导航来显示/隐藏div。我遇到的问题是，当一个div淡出时，下一个div会同时淡入。此外，如果我单击已经显示的div的链接，它将淡出并再次淡入。我不确定if语句是否是完成两个修复的最佳方法：

如果单击相同的链接，则在下一次开始之前，让显示的div完全淡出显示div fadeIn.

• Currently

1. fadeIn.
2. Currently
3. fadeOut/In。

以下是我到目前为止所做的工作(没有尝试失败的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

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

我还必须添加一个检查，以查看当前的.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);
            });
        }
    });
});

Answer 2

你可以这样做：

html当禁用javascript时，此使您的页面可以工作：

<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>

注意，href指向您想要显示的id。这也适用于屏幕阅读器，如果你想让你的页面可访问的话。

javascript。我还没有测试过它，您可能需要修复一些东西，但是想法是存在的。

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


});

您还应该考虑添加一些ARIA属性和角色属性。