jquery 图文滚动 透明渐变

<!--开始-->

<div class="ind_cityYelp">
    <div class="ind_title">
        <h2 class="ind_title_h">目的地点评</h2>
        （<a href="#" title="更多目的地">更多</a>）</div>
    <div class="ind_cityYelp_roll" id="citycommentindex">
        <ul class="ind_cityYelp_list">
            <li style="opacity: 1; height: 48px;"> <a href="#"><img src="" alt="liuruirui0330" title="liuruirui0330" height="48" width="48"></a>
                <h3 class="name"><a href="#">liuruirui0330</a> 在 <a href="#" title="苏黎世" class="fb">苏黎世</a> 说：</h3>
                <blockquote>物价太高了，作为穷学生真心消费不起。苏黎世湖坐船很美，白蓝色相间的小帆船让我心生艳羡~</blockquote>
            </li>
            <li style="opacity: 1; height: 48px;"> <a href="#"><img src="" alt="木呀呀" title="木呀呀" height="48" width="48"></a>
                <h3 class="name"><a href="#">木呀呀</a> 在 <a href="#" title="沙巴" class="fb">沙巴</a> 说：</h3>
                <blockquote>12月17日 从北京出发 有没有同游的。。。</blockquote>
            </li>
            <li style="opacity: 1; height: 48px;"> <a href="#"><img src="" alt="kimiyy" title="kimiyy" height="48" width="48"></a>
                <h3 class="name"><a href="#">kimiyy</a> 在 <a href="#" title="台北" class="fb">台北</a> 说：</h3>
                <blockquote>又遇到好心人，心里很温暖，小吃很多，很丰富</blockquote>
            </li>
            <li style="opacity: 1; height: 48px;"> <a href="#"><img src="" alt="街角的乞丐" title="街角的乞丐" height="48" width="48"></a>
                <h3 class="name"><a href="#">街角的乞丐</a> 在 <a href="#" title="澳门" class="fb">澳门</a> 说：</h3>
                <blockquote>有没有8月30日从长沙出发前往澳门的驴友？</blockquote>
            </li>
            <li style="opacity: 1; height: 48px;"> <a href="#"><img src="" alt="小小之小不点" title="小小之小不点" height="48" width="48"></a>
                <h3 class="name"><a href="#">小小之小不点</a> 在 <a href="#" title="香港" class="fb">香港</a> 说：</h3>
                <blockquote>香港是经常去的．建议不要周末去，因为人太多了，如果真要去，就选择人少过的口岸出境，建议走福田口岸，不要走罗湖或皇岗口岸．另外，深圳户口的最好选择指纹过关．</blockquote>
            </li>
            <li style="opacity: 1; height: 48px;"> <a href="#"><img src="" alt="zxflora" title="zxflora" height="48" width="48"></a>
                <h3 class="name"><a href="#">zxflora</a> 在 <a href="#" title="巴厘岛" class="fb">巴厘岛</a> 说：</h3>
                <blockquote>享受酒店的地方，山谷里，悬崖上，沙滩边•••</blockquote>
            </li>
            <li style="opacity: 1; height: 48px;"> <a href="#"><img src="" alt="KiddoYu" title="KiddoYu" height="48" width="48"></a>
                <h3 class="name"><a href="#">KiddoYu</a> 在 <a href="#" title="柏林" class="fb">柏林</a> 说：</h3>
                <blockquote>在柏林的时候想了好多哲学的东西。。。不愧是德国啊！很难吃+夏天很冷 广场和建筑很棒 好多绿色~</blockquote>
            </li>
            <li style="opacity: 1; height: 48px;"> <a href="#"><img src="" alt="穷游记者" title="穷游记者" height="48" width="48"></a>
                <h3 class="name"><a href="#">穷游记者</a> 在 <a href="#" title="阿维尼翁" class="fb">阿维尼翁</a> 说：</h3>
                <blockquote>傍晚的时候抵达这里，邂逅30天前出发时遇见的朋友，独自在车站黄昏的夕阳下。暮色中的老城像一座迷宫，顺着城墙绕来绕去转角每次都不一样。</blockquote>
            </li>
            <li style="opacity: 1; height: 48px;"> <a href="#"><img src="" alt="Da猫公子" title="Da猫公子" height="48" width="48"></a>
                <h3 class="name"><a href="#">Da猫公子</a> 在 <a href="#" title="巴塞罗那" class="fb">巴塞罗那</a> 说：</h3>
                <blockquote>8月31号到巴塞，准备玩三天，女生一枚一个人， 求同游</blockquote>
            </li>
            <li style="opacity: 1; height: 48px;"> <a href="#"><img src="" alt="Phylizn" title="Phylizn" height="48" width="48"></a>
                <h3 class="name"><a href="#">Phylizn</a> 在 <a href="#" title="维也纳" class="fb">维也纳</a> 说：</h3>
                <blockquote>优雅的城市 茜茜公主的足迹遍地 美好的施华洛世奇</blockquote>
            </li>
            <li style="opacity: 1; height: 48px;"> <a href="#"><img src="" alt="dd712" title="dd712" height="48" width="48"></a>
                <h3 class="name"><a href="#">dd712</a> 在 <a href="#" title="纽约" class="fb">纽约</a> 说：</h3>
                <blockquote>有需要moma guggenheim 的半价票 有需要的找我 随时可以</blockquote>
            </li>
            <li style="opacity: 1; height: 48px;"> <a href="#"><img src="" alt="BlueRainForest" title="BlueRainForest" height="48" width="48"></a>
                <h3 class="name"><a href="#">BlueRainForest</a> 在 <a href="#" title="墨西哥城" class="fb">墨西哥城</a> 说：</h3>
                <blockquote>墨西哥本土文化和西班牙殖民文化碰撞出激烈的火花，文化的多元性让人大为惊叹。人类学博物馆对印加文明，玛雅文明的覆盖在整个世界范围内无可比拟。懂西班牙语话，能在那里找...</blockquote>
            </li>
        </ul>
    </div>
</div>

<script>
$(function(){
 
    msgmove();
    
    $("#citycommentindex ul").hover(function(){
     
        $(this).attr("name","hovered"); //鼠标经过设置ul的name值为"hovered"
     
    },function(){
     
        $(this).removeAttr("name");
     
    });
    
    
    
    
    function msgmove(){ 
        var isIE=!!window.ActiveXObject;
        var isIE6=isIE&&!window.XMLHttpRequest;
        if($("#citycommentindex ul").attr("name") != "hovered"){
            //判断ul的name属性是否为"hovered"，决定下面代码块是否运行，以实现鼠标经过暂停滚动。
            var height = $("#citycommentindex li:last").height();
            
            if(isIE6){
                //判断IE6，jQuery的animate动画和opacity透明在一起使用在IE6中会出现中文重影现象，
 
                //所以在ie6中实行透明的禁用。
                $("#citycommentindex li:last").css({"height":0});
            }else{ 
                $("#citycommentindex li:last").css({"opacity":0,"height":0});
                //列表最后的li透明和高度设置为0 
            }
            
            $("#citycommentindex li:first").before($("#citycommentindex li:last"));
 
            //把列表最后的li提升到顶部，实现有限列表项无限循环滚动显示
             
            $("#citycommentindex li:first").animate({"height":height},"slow");
             
            //列表顶部的li高度逐渐变高以把下面的li推下去
            if(!isIE6){
                $("#citycommentindex li:first").animate({"opacity":"1"},"slow");
 
                //在非IE6浏览器中设置透明淡入效果
            }
            
        }
        
        setTimeout(msgmove,5000);
        
    }

});
</script>
        <!--结束-->

css:

/*首页-城市点评*/
.ind_cityYelp { margin-top:10px; padding-bottom:20px; border-bottom:8px solid #f5f4f0;}
.ind_cityYelp_roll { position:relative; width:100%; height:196px; overflow:hidden;}
.ind_cityYelp_list { width:100%; height:196px; overflow:hidden; margin-top:-10px;}
.ind_cityYelp_list li { height:48px; padding:10px 0 10px 58px; border-bottom:1px dashed #e2e2e2;}
.ind_cityYelp_list li img { float:left; display:inline; margin-left:-58px;}
.ind_cityYelp_list li .name { line-height:12px; padding-bottom:2px; color:#636363;}
.ind_cityYelp_list li blockquote { width:100%; height:3em; overflow:hidden;}