ajax替换

Question

所以在我的网站上，我在AJAX替换后遇到了CSS问题。目的是使用AJAX在一段时间后替换当前横幅，新横幅也将具有淡入效果。 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 code：

<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

您可以从服务器返回以下内容（FirstOrDefault无法正常工作，因为只有在页面加载完成后才会调用此内容：

onload

然后将displayData方法更改为：

<img alt="Hi" src="images/banner5.jpg" />

Answer 2

为什么要更改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();
}

你可以删除你的HTML上的css规则和onload，通常会有效;）

Answer 3

你可以尝试

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

    function getJSONData()
    {
       setTimeout("getJSONData()", 24000);
       $.getJSON('?act=rt&callback=?', displayData1);
    }
    function displayData1(data){
      $('#randpic').fadeOut(500);
      setTimeout('displayData('+data+')', 500);
    } 
    function displayData(dataJSON)
    {
       $("#randpic").html(dataJSON.randpic).fadeIn(500);
    }
</script>