jquery - Seperate background image with repeat x -


i using bootstrap rating website http://plugins.krajee.com/star-rating . wondering if possible each of stars 1 one, , make animation when page loads. if example have 3 stars rating, when load page first star animate big smaller, second , third etc.

in plugin background-image repeat-x used stars. question if possible percentage of background-image jquery maybe or css , make specific styling this.

thanks in advance

not really, looks of it. plugin's not set in 'hack-in-some-animation' friendly way.

i've given fair go, it's bit choppy. starter 10 though, , can polish desired. check out fiddle here.

var delayperstar = 500; var div = $('#rating').parent('div'); var siblingdiv = $('#rating').siblings('div'); var content = div.data('content'); div.attr('data-content', ''); var i=0;  var fn = function(){ var cb = function(){     div.attr('data-content', div.attr('data-content')+content[i]);     if(div.attr('data-content').length<=$('#rating').val()){      siblingdiv.css({         fontsize: 50+((content.length-(i-1)*10))+'px'     });     div.css({         fontsize: 50+((content.length-(i-1)*10))+'px'     });     }      siblingdiv.css({         width: (($('#rating').val() / (i+1))*100)+'%'     });     if(div.attr('data-content').length == content.length){         return;     }     settimeout(cb, delayperstar);     i++; }; settimeout(cb, delayperstar); }; fn(); 

Comments

Popular posts from this blog

python - No exponential form of the z-axis in matplotlib-3D-plots -

php - Best Light server (Linux + Web server + Database) for Raspberry Pi -

c# - "Newtonsoft.Json.JsonSerializationException unable to find constructor to use for types" error when deserializing class -