функция затухания вместе с функцией ползунка

Question

Когда я отправляю свою форму, последняя функция, которую я имею:

$("#message").show().delay(5000).fadeOut();

Это покажет мое сообщение с благодарностью в течение 5 секунд, а затем исчезнет сообщение "div".

Затем я попытался добавить эту функцию под ней:

$("#slide_panel").slideToggle("slow");

потому что я хочу, чтобы форма (которая находится внутри элемента #slide_panel) закрывалась / сдвигалась ПОСЛЕ 5-секундной задержки .... но когда я добавляю эту функцию, ее почти как 5-секундная задержка не существует и сообщение об успехе отображается примерно на полсекунды, а затем вся контактная форма исчезает, как и предполагалось.

Что не так с моим кодом?

$("#message").show().delay(5000).fadeOut();
$("#slide_panel").slideToggle("slow");

Answer 1

Функция задержки

применяется только к очереди анимации.Вы можете использовать следующий код, передав функцию обратного вызова в fadeOut()

   $("#message").show().delay(5000).fadeOut('fast', function(){
         $("#slide_panel").slideToggle("slow");
   });

Теперь slideToggle будет запущен после завершения анимации.

Answer 2

Вы можете обновить код до следующего ...

$("#message").show().delay(5000).fadeOut(function(){
    $("#slide_panel").slideToggle("slow");        
});

То есть добавьте slideToggle из SlidePanel в обратном вызове сообщения.Для большего количества идей, проверьте http://jsfiddle.net/sf2Nr/1/

Answer 3

Это связано с асинхронным поведением анимационных функций в jQuery.

Чтобы активировать slideToggle после задержки fadeOut, вы должны вызывать его из fadeOut.функция обратного вызова, то есть:

$("#message").show().delay(5000).fadeOut(0, function() {
    $("#slide_panel").slideToggle("slow");
});