Question

我遇到了问题，我试图按照以下帖子设置延迟： 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');
    }
});

还尝试了fadeIn / Out，但仍然没有动作。

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()和{{ 1}}方法。

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

fadeOut()

<强> 更新

这是 updated version 同样使用jQuery for animated所有内容，下面的代码段：

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');
    }
});

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); }

jQuery：addclass（）之间的延迟

1 个答案: