javascript - on form submit slide page to div using jquery

Question

i have form and one div named "success". when form is submited "success" div has been shown.

i am trying to do that, when form submitted, page slide to "success" div.

my code is.

$.ajax({
    type: "POST",
    url: "mail.php",
    data: dataString,
    success: function () {
        $('.success').show(1000).delay(5000).fadeOut();
        $("#contact-form")[0].reset();
    }
});

Answer 1

You can use the Slide Effect here like:

$('.success').show('slide').delay(5000).fadeOut();

Fiddle Demo #1

UPDATE

For scrolling to the success div, you can do this:

$('html, body').animate({
    scrollTop: $('.success').offset().top
}, 'slow');

Fiddle Demo #2

Answer 2

try this:

$.ajax({
  type: "POST",
  url: "mail.php",
  data: dataString,
  success: function () {
  var success = $('.success'); //caching the element to enhance performance
    success.show();
    var t = setTimeout(function() {
      success.fadeOut(5000);
    },1000);
    $("#contact-form")[0].reset();
  }
});