動態擷取一個HTML頁面，並製作動畫 - jQuery的

我想獲取一個HTML頁面，並用淡入動畫... 顯示它，但取不因這甚至動畫動態擷取一個HTML頁面，並製作動畫 - jQuery的

$(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); 
    }); 
});

工作，

來源

2012-02-21 user1184100

請嘗試使用'load（）'代替。 – elclanrs 2012-02-21 10:24:58

把console.log放在一個函數中，並在成功回調中調用該函數的數據作爲參數 – vireshas 2012-02-21 10:33:48

ajax是async操作，意味着它將在未來返回。
輸入使用成功回調中返回值的代碼：

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

來源

2012-02-21 10:25:40 gdoron

感謝gdoron :)它的工作！ – user1184100 2012-02-21 10:30:38

@ user1184100。只記得** ajax **是用於「**異步** JavaScript和XML」 – gdoron 2012-02-21 10:31:53

使用代替ajax()是這樣的：

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

更多信息請訪問.load()

來源

2012-02-21 10:27:12

他使用回調之外的數據。這是他的問題。 – gdoron 2012-02-21 10:30:54

謝謝你會試一試 – user1184100 2012-02-21 10:30:57

@gdoron :) ok謝謝 – 2012-02-21 10:33:16

AJAX是一種異步這意味着你不能期望結果立即可用，而是在未來一段時間。只要結果可用，jQuery就提供了使用回調的功能。你必須修改你的代碼一點點：

$(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內容的特定功能：.load()。它比上面的代碼示例略有不同，因爲jQuery的處理回調您：

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

這將加載，並自動插入內容，只要它的加載。您也可以爲此功能提供回叫，但在代碼插入後，它被稱爲。所以這可能不適用於你的情況，因爲你想在插入之前隱藏html。我只是爲了完整性而添加它。

來源

2012-02-21 10:33:49 apfelbox

謝謝apfelbox :) – user1184100 2012-02-21 10:36:34

動態擷取一個HTML頁面，並製作動畫 - jQuery的

回答

相關問題