jquery - Random explosion of text -

jquery - Random explosion of text -

i using next code explode value in text. separated textbox string separate char, while exploding whole div exploded. help me

var explode=$("#text").val(); var len=explode.length; var text=""; for(var = 0;i < len; i++) { var res=explode.charat(i); $("#div").append("<span id="+i+" >"+res+"</span>"); } for(var j=0; j < len; j++) { $("#"+j).each(function(i){ $("#"+j).css('position','relative'); $("#"+j).animate({left:'250px',opacity:'0.5',top:'250px',bottom:'500px'}); }); }

as understand term, "explode," want characters go flying in various directions. if correctly understand desire, stated in comment, main problem you're running same animation on each char span @ practically same time. need randomly take values you'll animate each separate char span.

here code should little more efficient you, , uses random values animations:

var explode = $('#explode_text').val(), container = $('#explode_container'), getrandomint, len = explode.length, i; /* * https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/math/random */ function getrandomint(min, max) { homecoming math.floor(math.random() * (max - min + 1)) + min; } (i = 0; < len; += 1) { container.append( $('<span />').text(explode.charat(i)) ); } container.children('span').each(function () { $(this) .css('position','relative') .animate({ opacity: '0.5', left: getrandomint(0, 250) +'px', top: getrandomint(0, 250) +'px', bottom: getrandomint(0, 500) +'px' }); });

jsfiddle demo: http://jsfiddle.net/m8ep8/1/

jquery