jquery - 加载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

使用 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
   }
});

Answer 2

You can do this: http://jsfiddle.net/Am8pf/

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

Answer 3

您可以向 load() 添加一个处理函数，该函数在完成后执行：

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