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

Question

我正在编写一个插件，用于显示 ajax content.It 被包裹在 ajax-content-wrap 中。我已经应用了 jquery animate() 但使用 auto [= 时不流畅24=] fade() 函数也是 animating.But 当我使用特定高度时 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')
        });
    });
});

如果不是，你能解释一下（按步骤）你需要什么吗，首先 "div" 200px 然后淡入 "loaded page" 或者同时做这两个？

注意：设置高度属性时不需要包括 'px'，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>

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

ajax show container not animating as expected

javascript

jquery

css

ajax

load

我的html代码如下

我的jquery

我的css