0

任何人都可以帮助这个 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);
    }
);
4

3 回答 3

2

除了使用 jquery 的 .delay 之外，您还可以使用 javascript 的 setTimeout 来实现相同的目的。为了使其成为更通用的变体，您还可以接受要显示文本的元素和延迟作为参数。

这是代码。

HTML

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

JS

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-19T12:31:39.260 回答
0

在定义函数之前，您有语法错误和函数调用。这应该可以解决问题：

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）。如果它有一个.find('span')before 调用它本来可以工作的each。

于 2013-10-19T11:08:53.857 回答
0

使用上面的示例，我和我的朋友想出了这个方法，它允许您输入数组并使用回调，因此只有在前一个消息完成时才会启动消息。 

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-14T15:33:06.300 回答