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

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

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

• javascript
• jquery
• animation

Share Improve this question Follow edited Aug 31, 2013 at 8:47 Vignesh Pichamani 8,0702222 gold badges8080 silver badges117117 bronze badges asked Aug 31, 2013 at 8:04 RonakRonak 4122 silver badges77 bronze badges 1

• So you want to run the sequence you've posted above and then re-start that sequence so that it continues to run in perpetuity? Or is there another aspect to your question? – David Thomas Commented Aug 31, 2013 at 8:47

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

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.

Well, you can use setInterval function, or if you make use of the plete 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 plete fiddle example: http://jsfiddle/yLNGn/32/

Have you considered using this jQuery plugin?