我正在编写一个用于显示ajax ajax-content-wrap的插件。它包装在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;
}

===============>>#1 票数:0 已采纳

如果我了解您要达到的目标,请采取以下解决方案:

$('.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,然后在“已加载的页面”中淡入淡出,或者同时进行两个设置?

注意:设置height属性时,无需包含'px',JQuery假定像素为默认值。

===============>>#2 票数:0

你想要这个吗? 请参见摘要。

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

  ask by Musa Muaz translate from so

未解决问题?本站智能推荐: