jQuery：addclass（）之间的延迟答案

【问题标题】：jQuery: Delay between addclass()jQuery：addclass（）之间的延迟
【发布时间】：2015-07-21 15:17:28
【问题描述】：

我遇到了问题，我尝试像以下帖子那样设置延迟： stackoverflow: jQuery: Can I call delay() between addClass() and such? 但这对我不起作用。

$( "#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');
    };
};

【问题讨论】：

"It doesn't work for me" 怎么样？
@Newd 我想删除未显示的类，然后我想延迟添加类并删除未选择的类，因此当您更改 CSS 中的显示时，它不是“弹出窗口”。如果我只是改变显示模式，它不能用css淡入。如果我只是用 rgba 制作它，它仍然是可点击的。
@Chimposant：#nav1 点击可以正常工作吗？是#nav2 点击给您带来了问题？
@TahirAhmed link 这是正在运行的最新版本。但是问题仍然存在，如果我使用“display:none”，链接会“弹出”出来，所以当 navwrapper 收缩或扩展时没有淡入/淡出。
@Chimposant：所以如果我理解正确，您希望navwrapper 先收缩，然后再扩展。您想相互转换，但 navwrapper 在两者之间扩展和收缩？

标签： jquery

【解决方案1】：

好的。

所以如果我理解正确，您的解决方案需要动画下拉元素上的display: none;，但它可以通过简单地使用jQuery的fadeIn()和fadeOut()方法来解决。

这里是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 之外的所有动画，sn-p 如下：

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>

【讨论】：