SlideDown Div с закрытой ссылкой

Question

Greetins,

Я хочу использовать скользящий DIV для отображения некоторых сообщений, таких как «Профиль обновлен».

Это мой код.DIV скользит вниз, когда я загружаю страницу, и исчезает через несколько секунд (задержка).Но я хочу иметь возможность закрыть DIV до истечения времени ожидания с помощью ссылки, но я не могу прикрепить SlideUp к нему ... Почему?

    $("#message").hide();

     $("#message").slideToggle('slow', function() {
        $(this).delay(2000).slideToggle("slow");
     });

    $("#close").click(function() {
        $("#message").slideUp();
    });  
    });

    <div id="message" style="display:none; border: 3px solid #ccc; width: 500px; height: 30px; background: #eee;">
    A message goes here! <a id="close" href="#" style="float: right;">Close div</a>
    </div>

Answer 1

Попробуйте добавить .stop () к вашему событию закрытия клика div.

$("#close").click(function() {
    $("#message").stop().slideUp();
});

jsfiddle пример

Answer 2

Это потому, что анимации ставятся в очередь в jQuery.Эффект slideUp будет запущен только после завершения отложенного эффекта slideToggle, и ваш элемент <div> будет к этому времени скрыт.

Вам необходимо вызвать stop () дляотмените задержку, как предлагает @Mark, но вы можете передать true в своем первом аргументе:

$("#close").click(function() {
    $("#message").stop(true).slideUp("slow");
});

Таким образом, все эффекты, находящиеся в очереди на элементе <div>, будут очищены,не только тот, который в настоящее время работает.