將文字保留在字幕中

Question

我的目標是始終在沒有空格的字幕上顯示文字。文字應該始終顯示在這個通常的動畫中。

文本應該總是出現表示在本平常動畫。在我的真實項目中，我經常收到推文，並且將它們放入選取框中，刪除第一個，然後在數量爲5的情況下製作一個.append（如果10條推文到達，則不是很好的解決方案第二，用戶無法很好地閱讀選取框，我想在選取框內有5個跨度，在某個時候，我的網頁開始變慢，通過不斷執行.append和多個跨度元素）。

用我設定的時間間隔來仿真接收推文，。我想顯示的唯一空間是最初的，否則我不想顯示空格。

我使用這個庫： https://github.com/aamirafridi/jQuery.Marquee

我的問題ocure當我嘗試添加一個新的詞組，動畫過早結束。我該如何解決這個問題？ 在顯示新添加的句子之前，選取框重新啓動。也許我沒有按照正確的方式去做。

http://jsfiddle.net/pt4rwo35/

<div class="marquee"> 
<span>first marquee text</span> 
<span>second marquee text</span> 
<span>third marquee text</span> 
<span>fourth marquee text</span> 
<span>fifth marquee text</span> 
</div> 

$(".marquee span:last-child").after("<span> Sixth marquee text</span>"); 

我希望它時所添加的文本結束動態精確地檢測。但由於某種原因動畫重新啓動

Answer 1

這是一個選項，可以在追加新文本後調用選取框功能嗎？我認爲當調用marquee函數來測量當前字符數時會發生一些情況。如果文本尚未添加，則這些字符尚未添加。

$.when($(".marquee span:last-child").after("<span>Sixth marquee text</span>")).then(function() { 
    $('.marquee').marquee({ 
     //speed in milliseconds of the marquee 
     duration: 5000, 
     //gap in pixels between the tickers 
     gap: 50, 
     //time in milliseconds before the marquee will start animating 
     delayBeforeStart: 100, 
     //'left' or 'right' 
     direction: 'left', 
     //true or false - should the marquee be duplicated to show an effect of continues flow 
     duplicated: true 
    }); 
}); 

$('.marquee') 
    .bind('finished', function(){ 
     //Change text to something else after first loop finishes 
     console.log('restart') 
}) 

Answer 2

您必須刪除gap在JS的marquee。而在你的CSS，

.js-marquee{ margin-right: 5px !important; } 

每個內容框的.js-marquee div元素有一個生成的值，這就是爲什麼有已複製的股利之間的一些空間。

試試吧，這個工作適合我。

Answer 3

在documentation短期看後...我發現：當finish事件發生時，

1. 追加更好發生，如果你不想改變是可見的。即銷燬該實例，追加新文本，並重新instanciate。
2. 第一次啓動時，您希望文本從輸入的右側開始...
   但是在重新實例化時，它需要從左側開始。
   有此選項：startVisibletrue或false。
   但它需要版本1.4.0，並且您正在使用1.3。1

所以...在下面的代碼片段，我把命名函數內的跑馬燈實例才能夠稍後再打電話吧。

第一次實例化後，startVisible變量更改爲true。

然後，我用了2秒鐘的setTimeout來模擬某種類似於想要附加新字符串的Ajax響應的事件 。

但我做了「等待」爲finish事件發生。
時間在這裏很重要！

var startVisible = false; // First instantiation will start at the right side. 
 

 
function marqueeInit(){ 
 
    $('.marquee').marquee({ 
 
    duration: 5000, 
 
    gap: 0,    // <-- zero space between the string and the "duplicated" string. 
 
    delayBeforeStart: 0, 
 
    direction: 'left', 
 
    duplicated: true, 
 
    startVisible: startVisible 
 
    }); 
 
    
 
    $('.marquee').on("finished", function(){ 
 
    console.log("Animation finished"); 
 
    }); 
 
} 
 

 
// Onload init 
 
marqueeInit(); 
 
startVisible = true; // It has to start visible for all future instantiation. 
 

 
setTimeout(function(){ 
 

 
    console.log("Ajax response! We have a new string to add!"); 
 

 
    $('.marquee').one("finished", function(){ // This function will be executed only once because of .one() 
 
    
 
    // Destroy the previous instance. 
 
    $(this).marquee("destroy"); 
 

 
    // Add a string 
 
    $(".marquee span:last-child").after("<span>===Sixth marquee text===</span>"); 
 

 
    // Re-instanciate Marquee. 
 
    marqueeInit(); 
 
    
 
    console.log("New string added!"); 
 
    
 
    }) 
 
},2000); // <-- 2 seconds timeout JUST FOR THE DEMO. It simulate an "anytime" append. 
 
      // That .one() function is what you should have in an Ajax success callback, for example. 
 
     

.marquee { 
 
    font-family:arial,sans-serif; 
 
    width: 300px; 
 
    overflow: hidden; 
 
    border: 1px solid #ccc; 
 
    background: #ddd; 
 
} 
 
.vertikal { 
 
    height:20px;width:200px; 
 
} 
 
.gambar { 
 
    width:100%!important; 
 
    height:auto!important; 
 
    background:none!important; 
 
    border:0px!important; 
 
} 
 
.gambar img { 
 
    border:1px solid #eee; 
 
    width:200px; 
 
    height:125px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js"></script> 
 
<div class="marquee"> 
 
\t <span>first marquee text</span> 
 
\t <span>second marquee text</span> 
 
\t <span>third marquee text</span> 
 
\t <span>fourth marquee text</span> 
 
\t <span>fifth marquee text</span> 
 
</div>