加載html動畫

Question

如何加載頁面的動畫（淡入或類似）轉換？這是我的代碼和鏈接...

<script type='text/javascript'> 

function cargarContenido(pagina) 
{ 
    $("#content").load(pagina); 
} 

function cargarContenidoReloj(pagina) 
{ 
    $("#content").html("<img src='images/ajax-loader.gif' class='clock' border='0' />"); 
    $("#content").load(pagina); 
} 
</script> 

鏈接

<ul id="nav"> 
<li id="nav1" onclick="cargarContenido('estudio.html')">ESTUDIO</li> 
<li id="nav2" onclick="cargarContenido('portfolio.html')">PORTFOLIO</a></li> 
<li id="nav3" onclick="cargarContenido('servicios.html')">SERVICIOS</a></li> 
<li id="nav4">PRESUPUESTO</li> 
<li id="nav5" onclick="cargarContenido('contacto.html')">CONTACTO</a></li> 

Answer 1

你可以這樣做：http://jsfiddle.net/Am8pf/

var page = $("<div/>").attr('id','page').load(pagina); 
$("#content").html(page).fadeIn('slow'); 
//^^^^^^^^^------------------------------hide it with css "display:none;" 

Answer 2

您可以添加一個處理函數來加載（）執行它完成後：

$("#loader").show(); 
    $('#content').load(pagina, function() { 
     $("#loader").hide(); 
    }); 

Answer 3

使用Ajax，您可以使用beforeSend和success事件來控制用戶體驗：

$.ajax({ 
    type: 'POST', url: pagina, 
    beforeSend: function() { 
     $("#content").html("<img src='images/ajax-loader.gif' class='clock' border='0' />"); 
    }, 
    success: function(data) { 
     $('#content').hide().html(data).fadeIn('slow'); //fadeIn animation for example 
    } 
});