After() animation...

After() animation...

Hey all...

I'm learning jQuery as I go here, and have set up a small application which calls a php script, inserts a record to the database, then returns the record.

It's based on this: http://9lessons.blogspot.com/2009/05/in ... y-and.html

The functionality is fine - the record inserts and the screen updates correctly - however I want to make the returned information slidedown, a la facebook/twitter.

It's the $('element').after(html) section I need to slideDown but no matter what method I use, I can't seem to get it to work.

Here's the code I've adapted:

<script type="text/javascript" >
$(function() {
$(".but_phoneno").click(function() {

var staff_id    = $("#staff_id").val();
var role_id       = $("#role_id").val();
var disp1        = $("#disp1").val();
var disp2        = $("#disp2").val();
var othercxs     = $("#othercxs").val();
var walkins     = $("#walkins").val();
var pager        = $("#pager").val();
var collections  = $("#collections").val();
var sales        = $("#sales").val();
var avsales     = $("#avsales").val();
var deposit     = $("#deposit").val();

var dataString = 'staff_id=' + staff_id + '&role_id=' + role_id  + '&disp1=' + disp1 + '&disp2=' + disp2 + '&othercxs=' + othercxs + '&walkins=' + walkins + '&pager=' + pager + '&collections=' + collections + '&sales=' + sales + '&avsales=' + avsales + '&deposit=' + deposit;

if(disp1=='' || walkins =='')
{
alert("Please Enter Some Text");
}
else
{
$("#flash").fadeIn(4000);
$("#flash").html('<img src="img/ajax-loader.gif" align="absmiddle"> <span class="loading">Loading records...</span>');


$.ajax({
type: "POST",
url: "process.php",
data: dataString,
cache: false,
success: function(html){
$("#display").after(html);
document.getElementById('disp1').value='';
document.getElementById('disp2').value='';
document.getElementById('othercxs').value='';
document.getElementById('walkins').value='';
document.getElementById('pager').value='';
document.getElementById('collections').value='';
document.getElementById('sales').value='';
document.getElementById('avsales').value='';
document.getElementById('deposit').value='';
document.getElementById('staff_id').focus();
$("#flash").slideUp(1000);
}
});
} return false;
});
});
</script>


So, I need $("#display").after(html); to slide in, instead of just appearing. Everything else is working great. Any ideas?