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

Привет,

Я хочу использовать скользящий 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>

user-interface jquery slide slidedown slideup
person Dannemannen    schedule 25.01.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

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

Пример jsfiddle

person Mark Coleman    schedule 25.01.2011
comment
На самом деле, вы можете использовать функцию clearQueue. Это немного жестче, чем остановка, но вы уверены, что анимация остановится. api.jquery.com/clearQueue - person Exelian; 25.01.2011

arrow_upward
0
arrow_downward

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

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

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

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

person Frédéric Hamidi    schedule 25.01.2011