Question

I have a small ajax application thats sends a form and returns data that matches the form values. When the request completes, the form fades out and the result fades in. The problem is that the page loses about 200px of it’s height, and the page just removes the extra whitespace quite roughly. I want it to animate the extra whitespace off smoothly, or just leave the page as is if it is’t possible to smoothly animate it. Here’s the code:

$(function() {
    $(".eivk").click(function() {
        $("#verkkokauppainfo").hide();
    }); 
    $(".vk").click(function() {
        $("#verkkokauppainfo").show();
    }); 
        $(".back").click(function() {
        $("#service-test").show();
        $("#resultcontainer").hide();
    }); 
}); 
$(function() {
    $("#submit").click(function() {

  if ($('input[name="julkaisu"]:checked').length == 0) {
       $('.error').show();
         return false;
   }

      var dataString = $('#service-test').serialize();
      //alert (dataString);return false;
     $.ajax({
    type: "POST",
    url: "http://www.kotisivut.name/quizs.php",
    data: dataString,
    dataType: "text",
    error: function(){ alert ('Nyt jotakin meni kyllä pahemman kerran pieleen. Yritä uudelleen?');
 },
    success: 
    function(data) {
 $("#resultcontainer").html(data);
 $("#service-test").fadeOut(1400);
$("#resultcontainer").fadeIn(1500);
 $("#page").animate({
    height: "auto"
  }, 1500 );

   }

  });
  return false;

    });
  });    
$(function() {
    $(".eivk").click(function() {
        $("#verkkokauppainfo").hide();
    }); 
    $(".vk").click(function() {
        $("#verkkokauppainfo").show();
    }); 
        $(".back").click(function() {
        $("#service-test").show();
        $("#resultcontainer").hide();
    }); 
}); 
$(function() {
    $("#submit").click(function() {

  if ($('input[name="julkaisu"]:checked').length == 0) {
       $('.error').show();
         return false;
   }

      var dataString = $('#service-test').serialize();
      //alert (dataString);return false;
     $.ajax({
    type: "POST",
    url: "http://www.kotisivut.name/quiz.php",
    data: dataString,
    dataType: "text",
    error: function(){ alert ('Nyt jotakin meni kyllä pahemman kerran pieleen. Yritä uudelleen?');
 },
    success: 
    function(data) {
 $("#resultcontainer").html(data);
 $("#service-test").fadeOut(1400);
$("#resultcontainer").fadeIn(1500);
 $("#page").animate({
    height: "???"
  }, 1500 );

   }

  });
  return false;

    });
  });

I’ve tried using height:auto in the code, but no, it won’t do anything. So I think that I have to retrieve the height off the page, and use it to animate the height.

Answer 1

Ok, so before you fade out grab the dom height of the parent element of service-test and result container using .height(), and set it using css({ ‘height’:’blah’ }) that way that element will not resize. Then after the fade in is complete animate the parent element to -=200px.