Question

I have a form that inserts data into my DB using AJAX and PHP.

AJAX

function insertBill()
{
    $.post('insert_bill.php', $('#insertbill').serialize(), 
        function(data) {
        $('#bills').append(data);
    });
};

Is it possible using jQuery to have my data fade into the #bills div?

Answer 1

You can use the following in different variations:

function insertBill() {
    $.post('insert_bill.php', $('#insertbill').serialize(), 
        function(data) {
        $('#bills').hide().append(data).fadeIn("slow");
    });
}

You could also have #Bills hidden via css on load of site or you could hide it on submit as follows:

function insertBill() {
    $.ajax({
        url: 'insert_bill.php',
        data: $('#insertbill').serialize(),
        type: 'post', 
        beforeSend: function(jqXHR, settings) {
            $('#bills').hide();
        },
        success: function(data, textStatus, jqXHR) {
            $('#bills').append(data).fadeIn("slow");
        },
    });
}