1

フォームを送信し、フォームの値と一致するデータを返す小さなajaxアプリケーションがあります。リクエストが完了すると、フォームがフェードアウトし、結果がフェードインします。問題は、ページの高さが約200ピクセル失われ、ページが余分な空白をかなり大まかに削除することです。余分な空白をスムーズにアニメーション化するか、スムーズにアニメーション化できない場合はページをそのままにしておく必要があります。コードは次のとおりです。

$(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 に答える