jQuery 将 delay() 与 hide() 结合使用

Question

我有以下脚本，它在单击 #icon-hamburger 时显示/隐藏下拉菜单。菜单在显示/隐藏时有短暂的淡入淡出动画：

// nav-mobile
$('#icon-hamburger, .icon-close').click(function() {
    if ($('.nav-mobile').css('opacity') === '0') {

        $('.nav-mobile').show();
        $('.nav-mobile').animate({
            'opacity': '1'

        },

        250, function() {
            // Animation complete.
        });
    }
    if ($('.nav-mobile').css('opacity') === '1') {
        $('.nav-mobile').animate({
            'opacity': '0'
        },

        250, function() {
            // Animation complete.
        });
        $('.nav-mobile').delay(250).hide();
    }
    return false;
});

菜单淡入效果很好，但它没有淡出而是消失了。我本以为以下行会让元素在隐藏之前淡出？:

$('.nav-mobile').delay(250).hide();

Answer 1

单击 here 查看 JSFiddle 示例。检查元素。

菜单还在。这不是隐藏。只是不透明度为零。

只需删除 jQuery 隐藏代码。

$('.nav-mobile').delay(250).hide();

Answer 2

$('.nav-mobile').delay(250).hide(200);

在隐藏函数中添加一些持续时间，这样它就会隐藏一些动画。

如果您想淡出元素，请使用 .fadeOut(200) 而不是 .hide(200) 函数。

jQuery 将 delay() 与 hide() 结合使用

jQuery using delay() with hide()

html

javascript

jquery

animation

jquery-animate