ajax显示容器未按预期动画

Question

我正在编写一个用于显示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;
}

Answer 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')
        });
    });
});  

如果没有，你能解释（步骤）你需要什么，首先制作＆＃34; div＆＃34; 200px然后淡入＆＃34;加载页面＆＃34;或者同时做两件事？

注意：不要包含＆＃39; px＆＃39;设置height属性时，JQuery将像素视为默认值。

Answer 2

愿你这个吗？ 请参阅代码段。

$(".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>