ajax 显示容器未按预期设置动画答案

【问题标题】：ajax show container not animating as expectedajax 显示容器未按预期设置动画
【发布时间】：2015-07-28 22:29:24
【问题描述】：

我正在编写一个用于显示 ajax 内容的插件。它被包裹在一个 ajax-content-wrap 中。我已经应用了 jquery animate() 但不平滑自动高度。并且 fade() 函数也是动画。但是当我使用特定高度 animate() 有效，而 fadeIn() 无效。

我的html代码如下

<div class="ajax-content-wrap">
   <div class="ajax-content-show">
      //here to show contents from external files
   </div>
</div>

我的 jquery

$('.ajax-content-show').animate({height:'200px'}, function(){
    $(this).fadeIn('slow', function(){
      $(this).fadeIn('slow').load(url);
    })
});

我的 CSS

.ajax-content-show{
   padding: 20px 20px;
   display: block;
   border: 1px solid #eee;
   margin: 10px 0;
}

【问题讨论】：

标签： javascript jquery css ajax load

【解决方案1】：

如果我理解您想要在这里实现的目标是一个解决方案：

$('.ajax-content-show').animate({
    height: '200'
}, 500, "linear",

function () {
    $('.ajax-content-show').hide(0, function () {
        $('.ajax-content-show').load(url, function () {
            $('.ajax-content-show').fadeIn('slow')
        });
    });
});

如果没有，你能解释一下（分步）你需要什么，先让“div”变成 200px，然后淡入“加载的页面”，还是同时做这两个？

注意：设置高度属性时不需要包含“px”，JQuery 假定像素为默认值。

【讨论】：

实际上我首先需要inherit 或auto 高度，但这并不顺利。第二件事现在正在工作，我用 animate.css 添加了 fadeIn 类。现在告诉我第一个的解决方案
为什么不直接用 display: 'block' 替换 height: '200' 呢？
如果你想先做“动态”高度，你需要加载url“隐藏”然后获取div/body的高度。然后只有在您拥有加载的 url 内容的高度后才开始您的动画代码并淡入淡出，这是唯一的方法。这是一个链接（希望有帮助）：stackoverflow.com/questions/3493825/…

【解决方案2】：

这是你想要的吗？见 sn-p。

$(".ajax-content-show").load("https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js", function(){
  $(this).slideDown(10000); // change the time, or just remove it if you think too slow.
  $(this).addClass("loaded");
});

.ajax-content-show{
  padding: 20px 20px;
  display: none;
  border: 1px solid #eee;
  margin: 10px 0;
  height: auto;
  opacity: 0;
  transition: opacity 5s ease;
  max-height: 500px; /* This just for show that sliding is working */
}
.ajax-content-show.loaded {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ajax-content-wrap">
   <div class="ajax-content-show">
      //here to show contents from external files
   </div>
</div>

【讨论】：