Question

I am trying to create a text animation; the idea is some texts will move to left side from right and fade away after five seconds.

I have developed the following code and it is working fine. jsfiddle But the problem is when I have multiple spans with texts, I don’t know how to show them individually.

HTML

<span class="magic" >Magic1</span>

Jquery

<script>

var left = $('.magic').offset().left;
$(".magic").css({left:left}).animate({"left":"0px"}, 2000);
$(".magic").fadeOut(3000); 

</script>

CSS

<style>
.magic {
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;

}
</style>

I have multiple texts like following, could you please show me how to display/animate them one by one and start the animation from the very beginning when it ends?

<span class="magic" >Magic1</span>
<span class="magic" >magic2</span>
<span class="magic" >magic3</span>
// unlimited

​
Thanks in Advance 🙂

Answer 1

You have errors in your markup, but aside from that, you can use recursion and a callback pattern:

UPDATE 2 (with credit to @Madbreaks):: http://jsfiddle.net/JZzdp/6/

var magic = $('.magic'),
i = 0,
len = magic.length,
left = $('.container').width(); //SET THIS TO WHATEVER PARENT CONTAINER YOU ARE SLIDING INSIDE

var slide = function(){
  magic.each( function( i ){
    $( this ).delay( i*5000 ).fadeIn().animate({"right":"+="+left},2000, function(){
      $( this ).fadeOut(3000).animate({ "right":"-="+left }, 0, function(){
        if( i === len - 1 ){ slide(); }
      });
    });
  });
}
slide();