每行后淡入

Question

不是单独为每一行执行javascript（单独创建一个在计时器上运行的div），我想知道是否可以淡入html中的每一行，通过创建“BR”分割行一个通用的javascript函数。

1. 接受字符串，div和速度作为参数。
2. 通过“br＆gt;”拆分该行并将其分成一个数组。
3. 在同步中使用之前淡入的最后一行淡化数组中的每一行。

Answer 1

请阅读代码中的注释，如果不清楚，请告诉我。

在Chrome上测试

＆＃13;

＆＃13;

<div class="panel panel-default">
    <div class="panel-body"> 
         <input type="text" placeholder="your input" />
    </div>
</div> 

＆＃13;

function action(delay, str) {
  // split the string into array
  var lines = str.split('<br/>');

  $.each(lines, function(index, h) {
    // create a div to each line
    var div = $('<div />').html(h);
    // hide it, append it into the body
    div.hide().appendTo(document.body).delay(index * delay);
    // wait by the div index and the delay
    setTimeout(function() {
      // do the fadeIn
      div.fadeIn();
    }, index * delay);
  });
}

action(300, 'Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum <br/> Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum <br/> Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum <br/> Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum');

＆＃13;

＆＃13;

＆＃13;