Question

我有一个小的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，但不，它不会做任何事情。所以我认为我必须从页面中检索高度，并使用它来设置高度的动画。

Answer 1

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

jQuery Animate：自动调整页面高度

1 个答案: