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

您可以执行此操作：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();
    });

加载html动画

3 个答案: