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”元素是可见的，您需要先隐藏它。

Demo

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

您可以在此处阅读有关jQuery ui的更多信息fadeIn

Answer 4

将#viewroul div设置为隐藏显示，如果它最初应该隐藏的话。而且关于Ajax的成功。只需让#viewroul淡入。或者＃viewroul.show（'slow'）;

JavaScript使AJAX内容淡入淡出

4 个答案: