Question

我使用JS来显示/隐藏div，方法是使用jquery函数fadeIn（）和fadeOut（）单击侧面导航。我遇到的问题是一个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);
            });
        }
    });
});

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属性和角色属性。

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

2 个答案: