jQuery：addclass（）之間的延遲（）

Question

我有這個問題，我試圖設置我的延遲像下面的帖子： stackoverflow: jQuery: Can I call delay() between addClass() and such? 但它不適用於我。

JSFiddle

$("#nav2").click(function() { 
    var notshown = $("#dropdown1", "#dropdown2"); 
    var dropdown2 = $("#dropdown2"); 
    if (dropdown2.hasClass("unselected") || dropdown2.hasClass("unshown")) { 
     notshown.removeClass('unshown').delay(1000).queue(function(){ 
      var dropdown1 = $("#dropdown1"); 
      var dropdown2 = $("#dropdown2"); 
      var navwrapper = $("#navwrapper"); 
      dropdown1.removeClass('unselected'); 
      dropdown2.removeClass('unselected'); 
      navwrapper.removeClass('unselected'); 
      dropdown1.addClass('unselected').dequeue(); 
      }; 

    }else{ 
     dropdown2.addClass('unshown'); 
     navwrapper.addClass('unselected'); 
     dropdown1.addClass('unshown'); 
    } 
}); 

與淡入/輸出也試過，但還是沒有動靜。

JSFiddle

$("#nav1").click(function() { 
    var dropdown1 = $("#dropdown1"); 
    var dropdown2 = $("#dropdown2"); 
    var navwrapper = $("#navwrapper"); 
    if (dropdown1.hasClass("unshown")) { 
     dropdown1.removeclass('unshown'); 
     dropdown1.delay(200).fadeIn(500).delay(200); 
     navwrapper.removeclass('unshown'); 
    } else { 
     dropdown2.addclass('unshown'); 
     navwrapper.addclass('unshown'); 
     dropdown1.delay(200).fadeOut(500); 
     dropdown1.addclass('unshown'); 
    }; 
}; 

Answer 1

所有權利。

所以，如果我理解正確的話，你的解決方案所需動畫的下拉元素display: none;，但它可能已經通過簡單地使用jQuery的fadeIn()和​​方法解決。

下面是其中jsFiddle，JavaScript的其中如下：

var dropdown1 = $('#dropdown1'); 
var dropdown2 = $('#dropdown2'); 
var navwrapper = $('#navwrapper'); 
var allDropdowns = $('#dropdown1, #dropdown2'); 
$('#nav1').click(function() { 
    if (dropdown1.hasClass('unselected')) { 
     allDropdowns.removeClass('unselected'); 
     navwrapper.removeClass('unselected'); 
     dropdown2.addClass('unselected'); 
     dropdown1.fadeIn(); 
    } else { 
     allDropdowns.fadeOut(); 
     dropdown1.addClass('unselected'); 
     navwrapper.addClass('unselected'); 
    } 
}); 
$('#nav2').click(function() { 
    if (dropdown2.hasClass('unselected')) { 
     allDropdowns.removeClass('unselected'); 
     navwrapper.removeClass('unselected'); 
     dropdown1.addClass('unselected'); 
     dropdown2.fadeIn(); 
    } else { 
     allDropdowns.fadeOut(); 
     dropdown2.addClass('unselected'); 
     navwrapper.addClass('unselected'); 
    } 
}); 

更新：

這裏是相同的updated version使用所有，但jQuery的動畫，片段如下：

var nav1 = $('#nav1'); 
 
var nav2 = $('#nav2'); 
 
var dropdown1 = $('#dropdown1'); 
 
var dropdown2 = $('#dropdown2'); 
 
var navwrapper = $('#navwrapper'); 
 
var allDropdowns = $('#dropdown1, #dropdown2'); 
 
var duration = 300; 
 
allDropdowns.hide(); 
 
navwrapper.hide(); 
 
nav1.click(function() { toggleFade(dropdown1); }); 
 
nav2.click(function() { toggleFade(dropdown2); }); 
 
function toggleFade(dropdown) { 
 
    if (!dropdown.is(':visible')) { 
 
     allDropdowns.fadeOut(duration); 
 
     navwrapper.slideDown(duration); 
 
     dropdown.fadeIn(duration); 
 
    } else { 
 
     allDropdowns.fadeOut(duration); 
 
     navwrapper.slideUp(duration); 
 
    } 
 
}

a { 
 
    display: inline-block; 
 
    text-decoration: none; 
 
} 
 
#navwrapper { 
 
    background-color: #ff0000; 
 
    height: 120px; 
 
    position: relative; 
 
} 
 
#dropdown1, #dropdown2 { 
 
    padding: 10px 25px; 
 
    color: rgba(0, 0, 0, 0.8); 
 
    position: absolute; 
 
} 
 
#dropdown1 a, #dropdown2 a { color: rgba(0, 0, 0, 1); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" id="nav1">YouTube</a> 
 
<a href="#" id="nav2">Twitch</a> 
 
<div id="navwrapper"> 
 
    <span id="dropdown1"> 
 
    <a href="#">Sodapoppin</a> <a href="#">Gronkh</a> <a href="#">Deine Mama</a> 
 
    </span> 
 
    <span id="dropdown2"> 
 
    <a href="#">Deine Mama</a> <a href="#">Gronkh</a> <a href="#">Sodapoppin</a> 
 
    </span> 
 
</div>