動的にHTMLページをフェッチし、それをアニメーション化 - jqueryの

Question

私はhtmlページをフェッチし、フェードインアニメーションでそれを表示したい... しかしフェッチが機能せず、このためにも、アニメーション

$(document).ready(function() { 
var src; 

    $.ajax({ 
     url: "pages/sample.html", 
     success: function (data) { src=data }, 
     dataType: 'html' 
    }); 

    console.log(src); **// Throws undefined** 

    //To animate 
    $(function() { 
     $('html') 
      .hide() 
      .html(src) 
      .fadeIn(5000); 
    }); 
}); 

Answer 1

ajaxは、async操作です。これは今後返されることを意味します。

$.ajax({ 
    url: "pages/sample.html", 
    success: function (data) { 
       src=data ; 
       console.log(src); 
      }, 
    dataType: 'html' 
}); 

Answer 2

使用​​ようajax()何かの代わりに：：より多くの情報訪問.load()

Answer 3

AJAX用

$('#result').load('pages/sample.html', function() { 
    //animation goes here 
}); 

が非同期である
は成功コールバック内の戻り値を使用するコードを入力してくださいこれは、結果をすぐに利用できるとは期待できないが、将来はある程度時間がかかることを期待することはできません。 jQueryは、コールバックを使用する機能を提供します。コールバックは、結果が利用可能になるとすぐに呼び出されます。あなたはあなたのコードを少し変更する必要が ：.load()：

$(function() { 

    $.ajax({ 
     url: "pages/sample.html", 
     success: function (data) { ajaxDataArrived(data); }, 
     dataType: 'html' 
    }); 

    function ajaxDataArrived (src) { 
     console.log(src); 
     $("html").hide().html(src).fadeIn(5000); 
    } 

}); 

のjQueryでのHTMLコンテンツの読み込みのための特定の機能があることに注意してください。 jQueryのは、あなたのためのコールバックを処理しますので、それは、上記のコード例よりもわずかに異なる動作します：

$("html").load("pages/sample.html"); 

これは、それがロードされるや否や、コンテンツを挿入自動的にロードします。 この関数のコールバックも提供できますが、コードが挿入されたの後にと呼ばれます。したがって、挿入する前にhtmlを隠したいので、これはあなたのケースではうまくいかないかもしれません。私は完全性のために追加したかっただけです。