jquery - .load成功工作后，通过动画更改div的高度

我有一个称为#loadHere的div，其中使用.load()功能将页面动态加载到其中。像往常一样，发生的事是div #loadHere根据加载的大小进行调整，但是，由于瞬时加载，div的大小调整很麻烦。是否有办法让父div #loadHere调整大小.animate()所以大小不只是跳？

这是我写的函数：

function hideMenu(fileName){
    $("#loadHere").animate({"opacity":"0"}, function(){
        $("#global-nav").animate({"height":0, "padding":0}, "slow");
        $("#backBtn").fadeIn("slow");
        $("#loadHere").load("stories/"+fileName, function(){
            $("#loadHere").animate("opacity","1");
        });
    });
}

最佳答案

尝试使用CSS3过渡，而不是使用JQuery animate（）。最初使用类hide隐藏div

<div id="loadHere" class="hide"></div>

// somewhere in your css file
.hide{
  opacity : 0;
}

.show{
  opacity : 1;
  transition : opacity 2s ease;
}

在您的加载回调中，将div的类名称更改为show

  $("#loadHere").load("stories/"+fileName, function(){
        $("#loadHere").prop('class','show');
  });

就是这样，CSS3将展示其魔力:)