Como faço para combinar o 'antes' método com o método 'fadeIn' em jQuery?

Question

Eu tenho uma linha de jQuery que é a inserção de um div antes de uma outra div que já está na página usando método antes do jQuery:

$("#sendEmail").before('<div id="response"><h1>Success</h1><p>Your email was sent.</p></div>');

Eu quero o novo div fade in, então eu tentei combinar os métodos de duas maneiras diferentes, mas ambos não funcionou corretamente. Aqui está o que eu tentei:

$("#sendEmail").before('<div id="response"><h1>Success</h1><p>Your email was sent.</p></div>').fadeIn("slow");

Isso não funcionou porque ele estava tentando desaparecer a div #sendmail e não o que eu estava inserindo. Aqui está outra tentativa que eu fiz:

$("#sendEmail").before('<div id="response"><h1>Success</h1><p>Your email was sent.</p></div>');                             

$("#response").fadeIn("slow");

Isso também não funcionou desde o div #response já está inserido quando tento disfarçá-la dentro, assim nada acontece.

Eu sinto que estou muito perto, mas eu não consigo descobrir isso. Alguém pode me ajudar?

Answer 1

definir uma regra css em #response ter display: none

então ele não vai mostrar até que fade in

Answer 2

$('<div id="response"><h1>Success</h1><p>Your email was sent.</p></div>')
    .hide().insertAfter("#sendemail").fadeIn();

Answer 3

Tente adicionar um extra de $ () isso irá chamar createElement na resposta e fade que em. Em seguida, ele irá adicionar o elemento antes do elemento sendEmail.

$("#sendEmail").before($('<div id="response"><h1>Success</h1><p>Your email was sent.</p></div>').fadeIn("slow"));

Basicamente o que é expandida para se.

var responseDiv = $('<div id="response"><h1>Success</h1><p>Your email was sent.</p></div>')
  .fadeIn("slow");
$("#sendEmail").before(responseDiv);