javascript - 使用变量时背景没有动画

Question

我正在使用 css-transitions，它是使用 jquery 添加的幻灯片，尽管由于某种原因它没有为元素的背景设置动画。

这是我正在使用的代码：

$(this).find('.pagers').children().css('-webkit-transition-property', 'background');
$(this).find('.pagers').children().css('-webkit-transition-timing-function', 'linear');
$(this).find('.pagers').children().css('-webkit-transition-duration', du);
$(this).find('.pagers').children().css('-moz-transition-property', 'background');
$(this).find('.pagers').children().css('-moz-transition-timing-function', 'linear');
$(this).find('.pagers').children().css('-moz-transition-duration', du);
$(this).find('.pagers').children().css('-o-transition-property', 'background');
$(this).find('.pagers').children().css('-o-transition-timing-function', 'linear');
$(this).find('.pagers').children().css('-o-transition-duration', du);
$(this).find('.pagers').children().css('-ms-transition-property', 'background');
$(this).find('.pagers').children().css('-ms-transition-timing-function', 'linear');
$(this).find('.pagers').children().css('-ms-transition-duration', du);
$(this).find('.pagers').children().css('transition-property', 'background');
$(this).find('.pagers').children().css('transition-timing-function', 'linear');
$(this).find('.pagers').children().css('transition-duration', du);

我不能只使用常规的 css 转换，因为我使用的是变量。

我已经尝试过做 .animate ，尽管它没有用。

http://jsfiddle.net/Hive7/uf5gE/

提前致谢

Answer 1

像这样：

$('.pager').css({
      '-webkit-transition' : 'background-color '+du+'s linear'      
});

当然你必须为所有浏览器添加代码