jQuery

Question

我想将 backgroundSize 动画化为 data-属性的数量。

<div class="polloption" data-percent="36" data-id="123" data-poll="12" style="background: url(img/danger.jpg);background-repeat:no-repeat;">

以及 jQuery-部分：

    $(document).ready(function(){

        var percent = $(this).attr('data-percent');
        $('.polloption').text(percent);   
        $('.polloption').animate(
            {
                backgroundSize: percent + '%',
            }, 1000);       
    });

文档就绪时没有任何反应。但是，如果我手动编写 backgroundSize: '36%' - 它会起作用。

如何从当前 .polloption 中获取 data-percent？

Answer 1

您在这一行中有错字：

var percent = $(this).attr('data-percent');

把这样一行改成：

$('.polloption').each(function (idx, ele) {
    var percent = $(ele).attr('data-percent');
    $(ele).text(percent);
    $(ele).animate({
        backgroundSize: percent + '%',
    }, 1000);
})

jQuery - 使用数据属性为 backgroundSize 设置动画

jQuery - Animate backgroundSize with data-attributes

this

custom-data-attribute