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
Post a Comment