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

如果没有，你能解释一下(分步骤)你需要什么吗，首先将“div”设置为200px，然后淡入“已加载页面”，或者同时执行这两个操作？

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