How do I fadeIn using JQuery

[klemme]

I have this succes message that the visitor sees after submitting the contact form via ajax using jquery:

My question is:
How can I first fadeIn the image, and then "500 later" fadeIn the rest of the text that is appended after the image?

-Now it fades in all at the same time.

This is the code:

var dataString = 'navn='+ navn + '&email=' + email + '&besked=' + besked + '&virksomhed=' + virksomhed + '&hjemmeside=' + hjemmeside + '&om=' + om;  
//alert (dataString);return false;  
$.ajax({  
  type: "POST",  
  url: "includes/mail_process.php",  
  data: dataString,  
  success: function() {  
    $('#kontakt_form').html("<div id='mail_succes'></div>");  
    $('#mail_succes').html("<h2 class=\"catch_font26\" style=\"background-color:#849fa5; padding:1px; color:#FFF;\">Tak for din besked!</h2>")  
    .append("<br /><div style=\"float:left;\"><img id='checkmark' src='styles/frontend_img/email_ok.jpg' width=\"30\" height=\"30\"/></div>")
    .append("<div style=\"float:left; margin-left:20px;\"><p style=\"font-size:20px;\">Vi vil vende tilbage på din henvendelse hurtigst muligt.</p><br /><p style=\"font-size:16px;\">Hvis I har yderligere spørgsmål kan vi også kontaktes pr. telefon:</p><br /><table><tr><td><p style=\"font-size:14px;\"><b>Telefon nr. </b></p></td><td style=\"padding-left:15px;\"><p>+0045 00 00 00 00</p></td></tr><tr><td><p style=\"font-size:14px;\"><b>Tidsrum: </b></p></td><td style=\"padding-left:15px;\"><p style=\"font-size:14px;\">Alle hverdage fra kl. 9-17.</p></td></tr></table><br /><p style=\"font-size:14px;\">Med Venlig Hilsen</p><p style=\"font-size:14px;\"><b>enkelt-webdesign</b></p>") 
    .hide() 
    .fadeIn(1700);  
    }  
});  
return false; 

  });  
}); 

Sorry if it looks a little messy.. :-)

Klemme

[fobos]

Well in my opinion is instead of creating a div then appending stuff to it, make the div in the form, apply a css attribute of visibility:none, add the image and the other div below it and apply a css attribute to them also. Then when success is called, just have:

success: function() {
    $("#mail_succes").show();
    $("#checkmark").fadeIn(3000, function() {
        $("#checkmark2").fadeIn(500);
    });
}

<form>
<div id="mail_succes">
<h2 class="catch_font26" style="background-color:#849fa5; padding:1px; color:#FFF;">Tak for din besked!</h2>
</div>
<div id="checkmark" style="float:left;">
<img src="styles/frontend_img/email_ok.jpg" width="30" height="30"/>
</div>
<div id="checkmark2" style="float:left; margin-left:20px;"><p style="font-size:20px;">Vi vil vende tilbage på din henvendelse hurtigst muligt.</p><br /><p style="font-size:16px;">Hvis I har yderligere spørgsmål kan vi også kontaktes pr. telefon:</p><br /><table><tr><td><p style="font-size:14px;"><b>Telefon nr. </b></p></td><td style="padding-left:15px;"><p>+0045 00 00 00 00</p></td></tr><tr><td><p style="font-size:14px;"><b>Tidsrum: </b></p></td><td style="padding-left:15px;"><p style="font-size:14px;">Alle hverdage fra kl. 9-17.</p></td></tr></table><br /><p style="font-size:14px;">Med Venlig Hilsen</p><p style="font-size:14px;"><b>enkelt-webdesign</b></p></div>
</form>

This is untested, but what you are looking for.

[Example]

Nest the second fadein within the first fadein. Search for: nest function fadein jquery