如何去实现一个AJAX的另类过渡效果

             前段时间在做一个AJAX交互的时候需要做出一种渐变的效果,而大部分我们都是在用一个动态的图标显示给大家,可是这里就不太适合了,但是如果生硬的变化在美感上大大折扣,考虑了很久最后决定用叫javascript中的setTimeout去实现,自己的javascript能力真的是很弱,都是现在刚刚接触的,对于一个做WEB的人来说,这是很大的失败,于是去找资料最后终于作出了效果,很是不错哦,嘿嘿,现在很大家分享:

function  ondiggSuccess(result)
{
    document.getElementById('top_'+result.id).style.filter="alpha(opacity=0)";
    document.getElementById('top_'+result.id).innerHTML ="<table width='100%' cellpadding='0' cellspacing='0'><tr><td valign='middle' align='center' style='font-size:12px; color:DarkGray; height:57px;'><font style=' font-size:large; color:Black; font-weight:bold;'>"+result.Diggcount+"</font></td></tr></table>";
    setTimeout("document.getElementById('top_"+result.id+"').style.filter='alpha(opacity=10)'",100);
    setTimeout("document.getElementById('top_"+result.id+"').style.filter='alpha(opacity=20)'",200);
    setTimeout("document.getElementById('top_"+result.id+"').style.filter='alpha(opacity=30)'",300);
    setTimeout("document.getElementById('top_"+result.id+"').style.filter='alpha(opacity=40)'",400);
    setTimeout("document.getElementById('top_"+result.id+"').style.filter='alpha(opacity=50)'",500);
    setTimeout("document.getElementById('top_"+result.id+"').style.filter='alpha(opacity=60)'",600);
    setTimeout("document.getElementById('top_"+result.id+"').style.filter='alpha(opacity=70)'",700);
    setTimeout("document.getElementById('top_"+result.id+"').style.filter='alpha(opacity=80)'",8000)
    setTimeout("document.getElementById('top_"+result.id+"').style.filter='alpha(opacity=90)'",9000)
    setTimeout("document.getElementById('top_"+result.id+"').style.filter='alpha(opacity=100)'",1000)
    document.getElementById('mydigg_'+result.id).innerHTML="<img src='/CommunityServerWeb20/Themes/default/images/digg-zhichi.gif' style='border:0px'/>"
}

这里主要是对一个层的透明度的调节,而且世界的间隔必须是有小大到,否则体现不出明显的效果,如果点击后数据处理正确,就调用这个JAVASCRIPT函数,效果就这样出现了,感觉还不错哦

转载于:https://www.cnblogs.com/lucangel/archive/2006/07/22/457077.html