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'      
});

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

使用变量时背景不动画

1 个答案: