javascript - Bounce Text one by one in regular interval of time -

i trying code bouncing effect text, make bounce 1 one in regular interval marquee.

i've tried jquery not getting bounce 1 one.

here fiddle.

js:

$(document).ready(function(){     $(".test").effect( "bounce",                {times:4}, 500 );  }); 

html:

<div class="test">     <p>first time bounce</p>     <p>this bounce nxt(after first)</p>      .     .     .     <p>last bounce return first one</p> </div> 

if update html have type of wrapper element around each letter, can animate each in turn. need loop through letters , animate them 1 @ time.

$(document).ready(function(){      //setup counter keep our place , cache selection letter wrappers     var counter = 0,         $chars  = $(".test").children();      //setup interval animate letter every     setinterval(function () {          //select current letter wrapper , animate         $chars.eq(counter).effect( "bounce", {times:1}, 500 );          //increment counter animate next letter next time around         counter++;          //check if counter still relates index of $chars collection         if (counter >= $chars.length) {             counter = 0;         }     }, 250);  }); 

this assumes html structure so:

<div class="test">     <span>s</span>     <span>o</span>     <span>m</span>     <span>e</span>      <span>t</span>     <span>e</span>     <span>x</span>     <span>t</span> </div> 

here demo: http://jsfiddle.net/jb9mt/6/

note had update css jqueryui wrapper element added html structure when using bounce effect (ui-effects-wrapper) display inline:

.ui-effects-wrapper {     display : inline-block; }