用重複x分開背景圖像

Question

我爲我的網站http://plugins.krajee.com/star-rating使用Bootstrap評級。 我想知道是否有可能逐一獲取每顆星星，並在頁面加載時製作動畫。 因此，如果例如我有3星評級，然後當我加載頁面我什麼第一個星從大到小，然後第二個，然後第三等動畫。

在這個插件的背景圖像與repeat-x用於星星。所以我的問題是，如果有可能通過jQuery或css獲得背景圖像的一個百分比，並對此做出特定的樣式。

在此先感謝

Answer 1

不是真的，它的外觀。這個插件並不是真正以一種「一部分動畫」的方式建立起來的。

我給它一個公平的去，但它有點波濤洶涌。希望它能成爲10的首發球員，並且可以根據需要拋光它。檢查出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();