Как скрыть элемент после задержки от его исчезновения с помощью jQuery?

Question

$("div#whitebox p").click(function () {
    $("div#blackout").fadeTo(550, 0).delay(555).hide();
});

То, что я пытаюсь выполнить с помощью приведенного выше кода, - сделать так, чтобы определенный div с именем blackout исчезал, а затем отключался, когда я нажимал на тег абзаца в другом div с именем whitebox. Причина, по которой мне нужно отключить его с помощью команды hide, заключается в том, что если я этого не сделаю, то затемняющий div, хотя и исчезнет, ​​по-прежнему покрывает другие ссылки и делает их неактивными. Однако в коде, который я использую, происходит то, что анимация затухания не работает, а div затемнения просто отключается мгновенно, даже без задержки. Как мне улучшить этот код, чтобы анимация затухания работала так же, как команда переключения hide ()?

Answer 1

Fadeout имеет функцию обратного вызова:

$("div#whitebox p").click(function () {
    $("div#blackout").fadeOut(550, function() {
        $(this).hide();
    });
});

Answer 2

Вы можете использовать функцию fadeOut. Эта функция устанавливает отображение div: none (следовательно, вам не нужно вызывать явную функцию hide.)

Использование:

$("div#whitebox p").click(function () {
    $("div#blackout").fadeOut(550);
});

Answer 3

Вы полностью затухаете, поскольку ваша непрозрачность равна 0.

Возможно, подумайте: .fadeToggle , которая будет имитировать функциональность, которую вы пытаетесь реализовать.