jquery animate (left to right) loop

Question

What i am trying to achieve is the captions on an image slider, slide from left to right with animate() and then fadeout as the image changes, then loop once the slider has started it's loop. I've searched these forums for hours trying to find a solution for the loop but i can't seem to get any of them working. Most likely something i am missing as i am only new to learning jquery.

I apologize if this question is a repeat, but i've tried for hours and just cant get it working.

Below is what i have so far: HTML:

<div class="slidein">

        <p class="first"> MATTE</p> 
        <p class="second">BLACK</p>
        <p class="third">BRO </p>

</div>

CSS:

.slidein {
    z-index: 10000;
    left: -100px;
    top: 100px;
    position: absolute;}

.first {

    background-color:#0C0;
    position:relative;}

.second {

    background-color:#0C0;
    position:relative;}

.third {
    width: 35px;
    background-color:#0C0;
    position:relative;}

jquery:

$(document).ready(function () {


    function repeat() {
        $(".first").animate({left:'200px'},100);

        $(".second").delay(200).animate({left:'200px'},200);

        $(".third").delay(300).animate({left:'200px'},300);



        $('.slidein').delay(3500).fadeOut(500)({

            },500 ,function() {
            repeat();
        });
    }

 repeat();       



});

Here is a fiddle of it working but not looping once finished, http://jsfiddle.net/elroyz/L2Ynu/18/

Answer 1

The problem is youre expecting a slided and hidden element to reposition and show itself by itself. You need to add the code that's gonna show your elements and reposition again at the begining of your function. Like this:

function repeat() {
  $(".slidein").css({"left":'10px'}).show();
  $(".slidein").animate({left:'+=200px'},500);
  $('.slidein').delay(3500).fadeOut(500,repeat);
}

repeat();  

UPDATED FIDDLE

Answer 2

with jquery

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

http://jsfiddle.net/yLNGn/32/