CODEWITHSUNDEEP
jqueryjquery-forms-plugin
methuselah
methuselah

Reputation: 13216

jQuery form animation on submission

What is the best way of fading out a form and fading in the results when using the jQuery form plugin? (http://jquery.malsup.com/form/#getting-started)

<script type="text/javascript">

// prepare the form when the DOM is ready 

$(document).ready(function() { 
var options = { 
    target:        '#t5',  
    beforeSubmit:  showRequest,  
    success:       showResponse   
}; 

// bind to the form's submit event 

$('#t5_booking').submit(function() { 
    $(this).ajaxSubmit(options); 
    return false; 
    }); 
});  

// pre-submit callback 

function showRequest(formData, jqForm, options) { 
    var queryString = $.param(formData); 
    // alert('About to submit: \n\n' + queryString); 
}

// post-submit callback 

function showResponse(responseText, statusText, xhr, $form)  { 
} 
</script>

Upvotes: 0

Views: 911

Answers (1)

Đorđe Zeljić
Đorđe Zeljić

Reputation: 1825

you can use callback functions like this:

function showResponse(responseText, statusText, xhr, $form)  {
    $($form).fadeOut('slow', function(){ // or maybe $form.fadeOut('slow', function(){
        // show your result with fadeIn func
        $('#resultdiv').html(responseText).fadeIn('fast');
    });
}

you can use callback in fadeIn too

Upvotes: 2

Related Questions