时间戳

首页 > 解决方案 > jQuery 使用 delay() 和 hide()

javascript - jQuery 使用 delay() 和 hide()

问题描述

我有以下脚本，它在#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();

标签： javascripthtmljqueryanimationjquery-animate

解决方案

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

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

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

推荐阅读