jquery新聞股票竊聽

我使用的代碼，我從教程找到構建一個新聞股票，一次淡出和一條線。它應該在以下幾行之間循環：「故事標題1」，「另一故事標題2」，「一些第三故事標題」和「最後的第四標題」。問題是，新聞股票最終會一次顯示多個條目。例如，我會看到類似「故事標題1另一個故事標題2」的內容。更改顯示下一行文本所需的時間長度並未解決，但延遲顯示了故障。jquery新聞股票竊聽

下面是完整的代碼：

<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>

來源

2011-08-06 user701510

我創建了一個對的jsfiddle代碼。 http://jsfiddle.net/playerace/Tssds/

我測試了各種不同的時間長度，當fadeIn/fadeOut延遲了一段時間並且被您設置的間隔1000ms捕獲時，會發生故障。通過瀏覽器上的多個選項卡或者在我的示例中，加載此代碼的多個jsfiddle實例將導致毛刺。

做簡單的刪除和追加修復了小故障，因爲當用戶瀏覽頁面時無法控制用戶的行爲，他們可能會加載很多東西。

我能想到的一個解決方案是刪除setInterval並找到一些其他方法來禁用showLink（），同時停留在股票代碼上。

來源

2011-08-06 08:12:22 ace

@ ace：你可以解釋爲什麼它會在經歷多個標籤時產生小故障嗎？我無法理解此問題。 – anasanjaria

@anasanjaria：當選項卡處於非活動狀態時，如在訪問同一瀏覽器上的其他選項卡時，fadeIn/fadeOut不會正確啓動。但是，當您將瀏覽器從Firefox更改爲Chrome時，這似乎不會發生。最有可能是由於選項卡之間的共享內存，非活動選項卡的優先級較低，但仍然有活動的javascripts正在運行。 – ace

我認爲在這種情況下，您通常會等待事件停止，然後再啓動另一個事件，而在這種情況下，即使前一個事件尚未完成，也會每隔1秒觸發一次，因此當您返回到頁面時，2 -3個事件連續發射。 – ace

jquery新聞股票竊聽

回答

相關問題