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

【问题标题】：Jquery show/hide divs - fix overlapping animationsJquery 显示/隐藏 div - 修复重叠动画
【发布时间】：2013-03-07 20:30:10
【问题描述】：

我正在使用 JS 通过单击带有 jquery 函数fadeIn() 和fadeOut() 的侧导航来显示/隐藏 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);
    });
});

【问题讨论】：

标签： javascript jquery css html navigation

【解决方案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);
            });
        }
    });
});

【讨论】：

这完美地解决了我的问题！非常感谢。我现在明白我做错了什么。

【解决方案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 属性和角色属性。

【讨论】：