如何展开使用ajax加载外部页面的div

我有这个测试网站http://italicsbold.com.au/ajax-demo/demo.html

而且我希望内容加载到的div能够顺利地扩展和收缩。 因此，

的高度应该随着平滑过渡而增加和减少。

Answer 1

 $('#pageContent').animate({height: 'hide'}); $.ajax({ // ... success: function() { $('#pageContent').animate({ height: 'show' }); } }) 

Answer 2

这将比单独使用animate更加顺畅。

快速演示，减去这里的AJAX部分。

 ;(function ( $, window, document, undefined ) { jQuery(document).ready(function($){ $.ajaxSetup({cache:false}); var previousTarget=null; var column = $('#columns').find('.column'); $('#columns').find('a').click(function(e) { e.preventDefault() }); column.click(function(){ pageurl = $(this).attr('href'); if (!$(this).hasClass('animated')) { column.not($(this).parent()).dequeue().stop().animate({ width : 'toggle', opacity: '0.5' }, 1400, 'linear', function () { if (pageurl != window.location) { window.history.pushState({path: pageurl}, '', pageurl); } }); } }, function() { if (this==previousTarget) { return; } else { $(this).addClass('animated'); column.not($(this).parent()).dequeue().stop().animate({ width : 'toggle', opacity: '0.5' }, 1400, 'linear', function () { $(this).removeClass('animated').dequeue(); var post_id = $(this).find('a').attr("rel") $("#page-container").html("loading..."); $("#page-container").load("http:///ajax/", {id: post_id},function(){ $('#page-container').trigger('create'); }); $('.bar').attr('href', '/'); previousTarget=this; return false; }); var space = ($(window).width() - 200); $(this).dequeue().stop().animate({ width:(space/4) },1400,'linear'); } }); }); })( jQuery, window, document );