JavaScript使AJAX內容淡入淡出

Question

每當腳本運行以加載新內容時，我如何使用id viewRoul將內容淡入div？

function list_roul(){
    var hr = new XMLHttpRequest();
    hr.onreadystatechange = function(){
        if (hr.readyState==4 && hr.status==200){
            document.getElementById("viewRoul").innerHTML = hr.responseText;
        }
    }
    hr.open("GET", "listRoul.php?t=" + Math.random(), true);
    hr.send();
}

我試過用

$('#viewRoul').html(html).fadeIn() 

但它不起作用！

Answer 1

如果內容已經可見（默認情況下是這樣），您需要在淡入之前隱藏它：

$('#viewRoul').html(html).hide().fadeIn();

例：

 $('#b1').click(function () { $('#one').html($(this).data('text')).fadeIn(); }); $('#b2').click(function () { $('#two').html($(this).data('text')).hide().fadeIn(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="b1" type="button" data-text="lorem ipsum">One</button> <div id="one"></div> <button id="b2" type="button" data-text="lorem ipsum">Two</button> <div id="two"></div> 

Answer 2

試試這個：

$('#MyDiv').hide().html(content).fadeIn({ duration: 2000 });

JSFiddle： http ： //jsfiddle.net/nYbHs/

您可以通過更改持續時間來調整速度。 這里有關於fadeIn的更多文檔： http ：//api.jquery.com/fadeIn/

澄清更新：此代碼需要進入您的ajax回調函數。 內容可以是響應本身（如果它已經是您想要的HTML格式），也可以將響應解析為您想要的HTML格式的內容字符串。

像這樣：

$.ajax(
{
    url: yourUrl,
    type: 'get',
    data: yourData,
    async: true,
    success: function(response) 
    {
        $('#MyDiv').hide().html(response).fadeIn({ duration: 2000 });
    }
});

Answer 3

“viewRoul”元素是可見的，您需要先隱藏它。

演示

$('#viewRoul').hide().html(html).fadeIn('slow');

你可以在這里閱讀更多關於jQuery ui的信息

Answer 4

將#viewroul div設置為顯示隱藏，如果它應該最初隱藏。 而且關於Ajax的成功。 只需讓#viewroul淡入。 或者＃viewroul.show（'slow'）;