CODEWITHSUNDEEP
javascriptjqueryanimation
Ronak
Ronak

Reputation: 31

Text animation from left and right in continuous loop using jquery

I want to animate text smoothly from left and right in continuous loop can anyone suggest me something here is the fiddle link: http://jsfiddle.net/yLNGn/3/

 $(document).ready(function () {
    $('.kp').animate({
        left: '10px'
    }, 600);
    $('.kp').delay(600).animate({
        left: '-128px'
    }, 600);
    $('.rp').delay(2000).animate({
        left: '10px'
    }, 600);
    $('.rp').delay(600).animate({
        left: '-108px'
    }, 600);
    $('.kpp').delay(4000).animate({
        left: '10px'
    }, 600);
});

Upvotes: 2

Views: 7762

Answers (3)

cl0udw4lk3r
cl0udw4lk3r

Reputation: 2733

Well, you can use setInterval function, or if you make use of the complete callback of the jquery animate method:

$(document).ready(function () {
  console.log('ready');

  var james = $('#bond');

  var right = function () {
    james.animate({left: '100px'}, 600, left);
  };

  var left = function () {
    james.animate({left: '0px'}, 600, right);
  };

  right();
});

this is the complete fiddle example: http://jsfiddle.net/yLNGn/32/

Upvotes: 1

Vignesh Pichamani
Vignesh Pichamani

Reputation: 8070

See Here is the answer. I make it as the seperate function with fiddle see here. 

function repeat() {
    $('.kp').animate({
    left: '10px'
}, 600);
$('.kp').delay(600).animate({
    left: '-128px'
}, 600);
$('.rp').delay(2000).animate({
    left: '10px'
}, 600);
$('.rp').delay(600).animate({
    left: '-108px'
}, 600);
$('.kpp').delay(4000).animate({
    left: '10px'
}, 600);
    $('.kpp').delay(600).animate({
        left:'-108px'
   },600 ,function() {
        repeat();
    });
}

Fiddle

Hopefully it may helps.

Upvotes: 1

Matthew Daly
Matthew Daly

Reputation: 9476

Have you considered using this jQuery plugin?

Upvotes: 0

Related Questions