javascript - 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/

您可以通过更改持续时间来调整速度。这是关于淡入淡出的更多文档： 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 的内容fadeIn

Answer 4

将您的#viewroul div 设置为显示隐藏，如果它最初应该是隐藏的。而关于 Ajax 的成功。只需让#viewroul 淡入即可。或者还有#viewroul.show('slow');