jQuery利用data属性实现backgroundSize动画失效问题求助

我帮你排查了下代码里的问题，主要有两个点导致动画没效果：

1. 上下文错误，获取不到正确的percent值 #

在$(document).ready()函数里，$(this)指向的是document对象，不是你要操作的.polloption元素，所以你获取到的percent其实是undefined，自然动画不会有反应。

2. jQuery原生animate不支持backgroundSize属性的动画 #

jQuery的原生animate方法只支持一部分CSS属性的过渡动画，backgroundSize不在这个列表里，所以即使你传对了值，也不会有动画效果——这也是为什么手动设置backgroundSize能生效（直接赋值不需要动画引擎处理），但用animate不行的原因。

下面给你两种可行的解决方案：

方案一：用CSS Transition实现（推荐，性能更好） #

这种方式不需要依赖额外的库，用CSS原生过渡就能实现动画效果：

首先修改你的CSS样式，给.polloption添加过渡属性和初始背景尺寸：

.polloption {
  background: url(img/danger.jpg);
  background-repeat: no-repeat;
  background-size: 0%; /* 初始状态设为0% */
  transition: background-size 1s ease; /* 添加过渡动画，时长1秒 */
}

然后修改jQuery代码，只需要设置最终的背景尺寸即可，CSS会自动处理动画：

$(document).ready(function(){
  $('.polloption').each(function() {
    // 用data()方法获取data属性，比attr()更靠谱，会自动转换数据类型
    var percent = $(this).data('percent');
    $(this).text(percent).css('backgroundSize', percent + '%');
  });
});

方案二：使用jQuery UI扩展animate能力 #

如果你项目里已经引入了jQuery UI，它扩展了animate方法，支持更多CSS属性的动画：

先确保你已经引入了jQuery UI（注意要在jQuery之后引入），然后修改代码：

$(document).ready(function(){
  $('.polloption').each(function() {
    var $option = $(this);
    var percent = $option.data('percent');
    $option.text(percent).animate({
      backgroundSize: percent + '%'
    }, 1000);
  });
});

两种方案都能解决你的问题，推荐优先用方案一，因为CSS过渡的性能比JS动画更好，代码也更简洁。

内容的提问来源于stack exchange，提问作者undefined