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 - 修復重疊動畫

回答

相關問題