jquery - ajax替换后CSS不工作

Question

所以在我的网站上，我在 AJAX 替换后遇到了 CSS 问题。目的是使用AJAX在一定时间后替换当前的banner，并且新的banner会有淡入效果。 AJAX 和 CSS 淡入效果单独使用效果很好，但是当它们组合在一起时，AJAX 仍然有效(即新图片仍然加载)但是没有更多的淡入效果。

Javascript 代码:

<script type="text/javascript"> 
    $(document).ready(function(){getJSONData();});

    function getJSONData()
    {
    setTimeout("getJSONData()", 24000);
    $.getJSON('?act=rt&callback=?', displayData);
    }

    function displayData(dataJSON)
    {
    $("#randpic").html(dataJSON.randpic);
    }
</script>

HTML代码:

<span id="randpic">
    <img alt="Hi" onload="this.style.opacity='1';" src="images/banner1.jpg" />
</span>

CSS 代码:

img {
    opacity:0;
    -moz-transition: opacity 2s; /* Firefox 4 */
    -webkit-transition: opacity 2s; /* Safari and Chrome */
    -o-transition: opacity 2s;
    transition: opacity 2s;
}

Javascript 调用的 PHP 将回显如下内容:

<img alt="Hi" onload="this.style.opacity='1';" src="images/banner5.jpg" />

应该就这些了。将添加您可能认为有用的任何其他详细信息。顺便说一句，我是第一次在这里提问，如果有什么不对的地方，请提前道歉。谢谢。

Answer 1

为什么要更改 HTML 内容？它的 src 属性应该改变。如果你想要一个淡入淡出的效果，你可以直接使用 FadeIn() 和 FadeOut() jQuery 的方法

$(document).ready(function(){
    $('#randpic img').fadeIn();
    getJSONData();
});

function getJSONData(){
    setTimeout("getJSONData()", 24000);
    $.getJSON('?act=rt&callback=?', displayData);
}

function displayData(dataJSON)
{
    $("#randpic img").fadeOut();
    $("#randpic img").attr('src', dataJSON.randpic);
    $("#randpic img").fadeIn();
}

您可以删除 css 的规则并加载到您的 HTML 上，通常可以正常工作；)