是否可以使用jquery对文本的每一行进行动画处理? [英] Is it possible to animate each line of text with jquery?

问题描述

是否可以在jquery中一次显示一行文字?我知道可以在Flash中完成.我在这里有一个示例 http://iliketoplay.dk/#/blog/deff .在播放视频时，鼠标单击一个圆圈，这会打开一个包含文本的框，但是每行文本一次显示一次，效果非常酷.可以重新创建吗?

Is it possible to reveal text one line at at time in jquery? I know it can be done in flash I have an example here http://iliketoplay.dk/#/blog/deff. On the video playing, the mouse clicks a circle which opens a box that contains text but each line of text is displayed one at a time with a really cool looking effect. Can it be recreated?

推荐答案

这应该不是问题，但是解决方案取决于您的输入格式.您需要按照以下步骤将文本分块:

This shouldn't be a problem, but the solution depends on your input format. You need to chunk up the text in lines which can be done like this:

var lines = text.split("\n");

然后，您可以根据需要对每一行进行操作，例如:

Then you can do something with each line as you desire, e.g:

var timer, 
  displayLine = function(){
    var nextLine = lines.shift();
    if(nextLine){
      var newLine = $('<span class="initState">' + nextLine + '</span>');
      $('#someContainer').append(newLine);
        newLine.animate({ [PUT SOME ANIMATION HERE] }, 1000);
      }
      timer = setTimeout(displayLine,3000);
    }
  }
timer = setTimeout(displayLine,3000);

在此处查看完整的示例: http://jsfiddle.net/7dd52/

See a complete example here: http://jsfiddle.net/7dd52/

这篇关于是否可以使用jquery对文本的每一行进行动画处理?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！