1

我有一个小型 ajax 应用程序，它发送一个表单并返回与表单值匹配的数据。当请求完成时，表单淡出，结果淡入。问题是页面丢失了大约 200px 的高度，页面只是粗略地删除了额外的空白。我希望它平滑地为多余的空白设置动画，或者只是让页面保持原样，如果无法平滑地为它设置动画。这是代码：

$(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;

    });
  });

我试过在代码中使用 height:auto ，但不，它不会做任何事情。所以我认为我必须从页面上检索高度，并用它来为高度设置动画。

4

1 回答 1

0

好的，所以在你淡出之前，使用 .height() 获取 service-test 和结果容器的父元素的 dom 高度，并使用 css({ 'height':'blah' }) 设置它，这样元素就不会调整大小。然后在淡入完成后将父元素设置为 -=200px。

于 2012-08-17T18:30:41.890 回答