javascript - 每个元素的 jQuery 动画

Question

我在 Jquery 上的动画方面经验不多。我想制作一个简单的动画，逐行突出显示我的文本，并可能会停止。我知道如何为一行做这样的事情，但我不知道如何处理循环。这是我的代码:

var lines = $('#page')[0].getClientRects();
for (var i=0, max = lines.length; i < max; i++)
{
    $('#under_liner')
    .queue(function() {
        $(this).css('top', lines[i].bottom).dequeue();
      })            
    .animate({
        width: lines[i].right - lines[i].left
    }, 1000 )
    .queue(function() {
    $(this).css('width', 0).dequeue();
    }); 
 }

和 jsfiddle http://jsfiddle.net/mz03kfua/2

Answer 1

我不知道这是否正是您正在寻找的，但我会按照以下方式进行。

1. 编写一个函数来添加下划线
2. 对动画回调进行递归调用
3. 创建一个全局变量来记录当前带下划线的行数
4. 添加一个 bool 值，当 false 时停止函数

---

var lines = $('#page')[0].getClientRects();
var play = true;
var index = 0;

underlineLine();

$('button').click(function(){
    play = !play
    if(play){
        underlineLine()
        $(this).html("STOP")
    }else{
        $(this).html("CONTINUE")
    }
})

function underlineLine(){
    if(index >= lines.length) return
    if(play){ 
        $('#under_liner').css('top', lines[index].bottom).dequeue();   
        $('#under_liner').css('width','0px');
        $('#under_liner').animate({
            width: lines[index].right - lines[index].left
        }, 1000, function(){
            underlineLine(index++)
        })
        $('#under_liner').css('width', 0).dequeue();
    }
}

HERE IS A FIDDLE WITH THE CODE.

希望对您有所帮助。