jquery - HTMLアニメーションを読み込む

Question

ロードされたページの遷移（fadeInまたは同様の）をどのようにアニメーション化できますか？これは私のコードとリンクです...

<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

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 3

load（）にハンドラー関数を追加して、完了後に実行することができます。

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