使用变量时背景不设置动画

Background not animating when using variables

本文关键字：设置 动画 背景 变量      更新时间：2023-09-26

我使用的是css转换，它是使用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/

提前感谢

制作这样的东西：

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

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

相关文章：