jquery函數一次顯示文本一個字符

任何人都可以用這個JQuery來幫忙嗎？我正在嘗試創建一個接受文本變量的函數，然後稍微延遲一次輸出每個字母。這裏是我的代碼jquery函數一次顯示文本一個字符

//example of function call 
var data = "hi you there"; 
display_text(data); 

//function to fade words in individually 
function display_text(data) { 

    var $words = data.split(" "); 

    var html = ""; 
    for (var i = 0; i < words.length; i++) { 
     html += "<span>" + words[i] + " </span>"; 
    }; 

    html.insertBefore("#placeholder").hide().each(function(i){ 
     $(this).delay(i*100).fadeIn(700); 
    } 
);

來源

2013-10-19 user2376313

除了使用jQuery的.delay，你也可以使用javascript的setTimeout來實現同樣的事情。爲了使它成爲一個更通用的變體，你還可以接受要顯示文本的元素，並將其作爲參數延遲。

這是代碼。

HTML

<body> 
    <div id="myText"></div> 
</body>

var text="This text will be written one by one."; 
var delay=300; 
var elem = $("#myText"); 
//text- string 
//elem - jQuery element where text is to be attached 
//delay - the delay in each text 
var addTextByDelay = function(text,elem,delay){ 
    if(!elem){ 
     elem = $("body"); 
    } 
    if(!delay){ 
     delay = 300; 
    } 
    if(text.length >0){ 
     //append first character 
     elem.append(text[0]); 
     setTimeout(
      function(){ 
       //Slice text by 1 character and call function again     
       addTextByDelay(text.slice(1),elem,delay);    
      },delay     
      ); 
    } 
} 

addTextByDelay(text,elem,delay);

我還創建了一個小提琴Enter Text with Delay

來源

2013-10-19 12:31:39 Ghost

謝謝你這個偉大的作品 – user2376313

關於這個的一個問題，我有一個PHP文件，它從數據庫和其他信息，這是發送到jquery文件並通過這個函數運行，我怎麼會得到它顯示多個回聲語句沒有他們是在同一行上，或沒有這個功能執行回聲的html標籤等 – user2376313

以及我發現一個工作圍繞編碼如果其他搜索0index <然後確定它是什麼標籤，並將其正確插入到doccument，然後重新定義0index作爲>之後的下一個值 – user2376313

在函數定義之前，你有語法錯誤和函數調用。這應該做的伎倆：

var data = "hi you there"; 
function display_text(data) { 
    var words = data.split(" "); 

    for (var i = 0; i < words.length; i++) { 
    var span = $('<span />').text(words[i]).hide().appendTo('#placeholder'); 
    } 

    $('#placeholder').find('span').each(function(i) { 
    $(this).delay(i * 100).fadeIn(700); 
    }); 
} 
display_text(data);

你的變量html也是一個字符串，它應該被裹得像個這個$(html)要使用jQuery包裝。這將使得可以將字符串注入爲DOM。

下一個問題是，當你申請$.each時，你可能會在一個元素上工作（即你的html）。如果它在調用each之前有.find('span')，它可以工作。

來源

2013-10-19 11:08:53 adrenalin

這工作，但寫在一個新的行上的每個字母，有沒有辦法讓它在一行？ – user2376313

函數聲明被提升到頂端，所以這不是問題。你說什麼語法錯誤？ –

@JanDvorak：解析錯誤; 「每個」缺少右括號。其他問題是：分配給變量'$ words'並使用'words'，使用String變量'html'作爲jQuery包裝對象。 – adrenalin

上面我的朋友的例子中工作，我想出了這個，讓你喂的一個數組並使用回調函數，所以只有當前一個函數完成時纔會啓動消息。

var message = [ 
{ 
    t: 'CLASSIFIED COMMUNICATION', 
    d: 200, 
    e: '#msgHeader1' 
}, 
{ 
    t: 'COLONIAL FLEET', 
    d: 200, 
    e: '#msgHeader2' 
}, 
{ 
    t: 'BY ORDER OF', 
    d: 200, 
    e: '#msgHeader3' 
}, 
{ 
    t: 'ADMIRAL WILLIAM ADAMA', 
    d: 200, 
    e: '#msgHeader4' 
}, 
{ 
    t: 'YOU ARE HEARBY REQUESTED AND REQUIRED TO REPORT TO COORDINATES', 
    d: 100, 
    e: '#msgMain1' 
}, 
{ 
    t: 'N 40 28 38.078 W 111 53 15.954', 
    d: 100, 
    e: '#msgMain2' 
}, 
{ 
    t: ' 1900 HRS', 
    d: 100, 
    e: '#msgMain3' 
}, 
{ 
    t: 'STAR DATE 2014.02.14', 
    d: 100, 
    e: '#msgMain4' 
}, 
{ 
    t: 'SO SAY WE ALL', 
    d: 200, 
    e: '#soSayWeAll' 
} 
]; 

var text; 
var delay; 
var elem; 

var j = 0; 
var run = function (i) { 

text = message[i].t; 
delay = message[i].d; 
elem = message[i].e; 
var teleText = function (text, elem, delay, callback) { 
    if (text.length > 0) { 
    $(elem).append(text[0]); 
    setTimeout(
     function() { 
     teleText(text.slice(1), elem, delay, callback); 
     }, delay 
    ); 
    } else if (text.length == 0) { 
    console.log('finished'); 
    j++; 
    callback(); 
    } 
}; 

teleText(text, elem, delay, function() { 
    run(j); 
}); 

};

來源

2014-02-14 15:33:06

jquery函數一次顯示文本一個字符

回答

相關問題