Question

我正在使用从教程中找到的代码构建一个一次淡入和淡出一行的新闻自动收报机。它应该在各行之间循环：“故事标题1”，“另一个故事标题2”，“第三个故事标题”和“最终，第四个标题”。问题是新闻自动收报机最终会一次显示多个条目。例如，我会看到类似“Story headline1Another Story headline 2”的内容。更改显示下一行文本所需的时间长度无法解决，但延迟显示故障。

这是完整的代码：

<head> 
<style type="text/css"> 
/* CSS goes here */
#ticker
{
    border: 1px solid #666;
    background: #DDD;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px; 
    border-radius: 4px;
    color: #333;
    font: 13px/16px Arial,Verdana,sans-serif;
    padding: 3px 7px;
    width: 400px;
}
#ticker .divider { 
    padding: 0 4px;
}
#ticker a, #ticker a:visited
{
    color: #333;
    text-decoration: none;
}
#ticker a:hover
{
    color: #930;   
}
</style> 

</head> 

<body> 

<div id="ticker" class="newsTicker"> 
    Announcement 
    <span class="divider">|</span> 
    <ul> 
        <li><a href="">Story headline 1</a></li> 
        <li><a href="">Another Story headline 2</a></li> 
        <li><a href="">Some third story headline</a></li> 
        <li><a href="">A final, fourth headline</a></li> 
    </ul> 
</div> 



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> 
<script type="text/javascript"> 
// javascript will go here
$(function()
{
    $('#ticker').each(function()
    {
        var ticker = $(this);
        var fader = $('<span class="fader">&nbsp;</span>').css({display:'inline-block'});
        var links = ticker.find('ul>li>a');
        ticker.find('ul').replaceWith(fader);

        var counter = 0;
        var curLink;
        var fadeSpeed = 600;
        var showLink = function()
            {
                var newLinkIndex = (counter++) % links.length;
                var newLink = $(links[newLinkIndex]);
                var fadeInFunction = function()
                    {
                        curLink = newLink;
                        fader.append(curLink).fadeIn(fadeSpeed); 
                    };
                if (curLink)
                {
                    fader.fadeOut(fadeSpeed, function(){
                        curLink.remove();
                        setTimeout(fadeInFunction, 0);
                    });
                }
                else
                {
                    fadeInFunction();
                }
            };


        var speed = 1000;
        var autoInterval;

        var startTimer = function()
        {
            autoInterval = setInterval(showLink, speed);
        };
        ticker.hover(function(){
            clearInterval(autoInterval);
        }, startTimer);

        fader.fadeOut(0, function(){
            fader.text('');
            showLink();
        });
        startTimer();

    });
});
</script> 
</body> 
</html>

Answer 1

我为你的代码创建了一个jsfiddle。 http://jsfiddle.net/playerace/Tssds/

我测试了各种时间长度，当fadeIn / fadeOut延迟一点时发生毛刺，并且被你为间隔设置的1000ms捕获。通过浏览器或我的示例中的多个选项卡，加载此代码的多个jsfiddle实例将导致故障。

执行简单的删除和追加修复了毛刺，因为当他们浏览您的页面时无法控制用户的行为，他们可能会加载很多东西。

我能想到的一个解决方案是删除setInterval并找到一些其他方法来禁用showLink（），同时盘旋在自动收报机上。

jquery新闻自动收报机

1 个答案: