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

我正在使用JS显示/隐藏div通过点击侧面导航与jquery函数fadeIn（）和fadeOut（）。我碰到的问题是一个div淡出，另一个同时淡入。另外，如果我点击已经显示的div的链接，它会淡出并再次淡入。我不确定IF语句是否是做两个修正的最佳方法：
1.让div显示完全淡出，然后再开始淡入淡出。
2.如果单击相同的链接，当前显示的div不会淡出/中。jquery显示/隐藏divs - 修复重叠动画

这里是我迄今（不含在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); 
    }); 
});

来源

2013-03-05 Craig

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

我也有添加一个检查，以查看当前.infozone格是可见的 - 否则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); 
      }); 
     } 
    }); 
});

来源

2013-03-05 14:33:51 freejosh

这已完美解决了我的问题！非常感谢你。我现在看到我做错了什么。 – Craig 2013-03-05 14:43:44

你可以什么这样的：

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

来源

2013-03-05 14:37:06 Bertrand

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

回答

相关问题