Question

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

Answer 1

您可以使用javascript的setTimeout来实现相同的功能，而不是使用jquery的.delay。为了使它成为更通用的变体，您还可以接受要显示的文本的元素并将其作为参数延迟。

这是代码。

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

Answer 2

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

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')之前有each，它可能会有用。

Answer 3

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

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);
});

};

jquery函数一次显示一个字符

3 个答案: