jquery - 用重复 x 分隔背景图像

Question

我正在为我的网站使用 Bootstrap 评级 http://plugins.krajee.com/star-rating .我想知道是否有可能一个一个地获取每颗星星，并在页面加载时制作动画。因此，例如，如果我有 3 星评级，那么当我加载页面时，我将第一颗星从大到小制作动画，然后是第二颗，然后是第三颗，依此类推。

在这个插件中，带有 repeat-x 的背景图像用于星星。所以我的问题也是，是否有可能仅使用 jQuery 或 css 获取一定比例的背景图像，并为此设置特定的样式。

提前致谢

Answer 1

从表面上看，不是真的。该插件并没有真正以“hack-in-some-animation”友好的方式设置。

我试了一下，但有点不稳定。不过，希望它是 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();