jQuery 使用 delay() 和 hide()答案

【问题标题】：jQuery using delay() with hide()jQuery 使用 delay() 和 hide()
【发布时间】：2020-10-13 17:32:44
【问题描述】：

我有以下脚本，当单击#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();

【问题讨论】：

我要确保更改的一件事是将if ($('.nav-mobile').css('opacity') === '1') { 更改为else if ($('.nav-mobile').css('opacity') === '1') {。您的代码现在的方式是，如果不透明度为 0，则动画为 1。然后您的不透明度为 1，动画回 0。

标签： javascript html jquery animation jquery-animate

【解决方案1】：

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

在隐藏功能中添加一些持续时间，以便它会通过一些动画隐藏。

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

【讨论】：

【解决方案2】：

单击here 获取 JSFiddle 示例。检查元素。

菜单还在。它没有隐藏。只是不透明度为零。

只需删除 jQuery 隐藏代码。

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

【讨论】：