동적 HTML 페이지를 가져 오기과 애니메이션 - JQuery와

Question

내가 HTML 페이지를 가져와 fadeIn 애니메이션 ... 와 함께 표시 할 그러나 페치 인해이 심지어 애니메이션

$(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은 비동기 작업입니다. 이는 향후에 반환 될 예정입니다.

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

Answer 2

사용 .load() 같은 ajax() 뭔가 대신 : 추가 정보를 원하시면 방문 .load()

Answer 3

AJAX에 대한

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

는 비동기가
은 성공 콜백 내에서 반환 값을 사용하는 코드를 입력 즉, 한 번에 결과를 얻을 수는 없지만 나중에는 결과를 기대할 수는 없습니다. jQuery는 결과가 나오는 즉시 호출되는 콜백을 사용할 수있는 기능을 제공합니다. 당신은 당신의 코드를 약간 수정해야합니다 : .load() : jQuery를에로드 HTML 콘텐츠에 대한 특정 기능이 있음을,

$(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("pages/sample.html"); 

이이 장전 마자, 내용을 삽입 자동으로로드됩니다. 이 함수에 대해서도 콜백을 제공 할 수 있지만 코드를 삽입 한 후 이라고합니다. 그래서 html을 삽입하기 전에 숨기고 싶으므로이 경우에는 작동하지 않을 수 있습니다. 나는 단지 완성을 위해 그것을 추가하고 싶었다.