JavaScript使AJAX内容淡入淡出

每次运行脚本加载新内容时，如何使内容以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() 

---

但它不起作用

如果内容已经可见（默认情况下是可见的），则需要在淡入前将其隐藏：

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

示例：

$（'#b1'）。单击（函数（）{
$（'#one'）.html（$（this.data（'text'））.fadeIn（）；
});
$（'#b2'）。单击（函数（）{
$（'#two'）.html（$（this.data（'text'））.hide（）.fadeIn（）；
});

一个
两个
试试这个：

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

JSFiddle：

您可以通过更改持续时间来调整速度。以下是有关fadeIn的更多文档：

澄清更新：此代码需要放入ajax回调函数中。内容可以是响应本身（如果它已经是您想要的HTML格式），也可以是解析为您想要的HTML格式的内容字符串的响应

像这样：

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

“viewRoul”元素是可见的，您需要先隐藏它


您可以在此处阅读有关jQuery ui的更多信息
将您的#viewroul div设置为显示隐藏，如果它最初应该是隐藏的。以及Ajax的成功。只需让视野淡入即可。或者也可以是#viewroul.show（'slow'）
 此
$（'#viewRoul'）.html（html）.fadeIn（）
需要jquery在错误控制台中是否会出现错误？它怎么不起作用？
$('#viewRoul').hide().html(html).fadeIn('slow');