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')を呼び出す前にがあれば、機能していた可能性があり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 に答える