CODEWITHSUNDEEP
javascriptjquerycssanimation
Piotr Suchanek
Piotr Suchanek

Reputation: 384

jQuery animation for each element

I do not have much experience in animation on Jquery. I want to make a simple animation that will highlight my text line by line with the possibility of stopping. I know how to do something like this for one line but I have no idea how to deal with loop. here is my code:

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

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

Upvotes: 0

Views: 113

Answers (2)

Carlo Moretti
Carlo Moretti

Reputation: 2250

I don't know if this is exactly what you are looking for, but here's how I'd do it.

  1. Make a function that does the underlining
  2. Make a recursive call on animation callback
  3. Create a global variable to keep count of the current underlined line
  4. Add a boolean that stops the function when 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.

Hope it helps.

Upvotes: 1

Jason
Jason

Reputation: 4159

http://jsfiddle.net/mz03kfua/4/

var lines = $('#page')[0].getClientRects();
var current = 0;
var element;

function animateLine() {
    if(typeof lines[current] !== "object") {
        return;
    }

    var line = lines[current];
    element = jQuery("<div />", {"class": "under_liner"}).prependTo("#page");

    element.css({top: line.bottom}).animate({width: line.width}, 1000, function() {
        current++;
        animateLine();
    });


}

function stopLine(e) {
    e.preventDefault();

    element.stop(true);
}

jQuery(".stop").click(stopLine);

animateLine();

Upvotes: 1

Related Questions