我正在尝试用jQuery构建一个背景动画,它从一个渐变变为另一个渐变.我知道你可以使用.animate()函数来改变纯色背景颜色,但是这也可以用于渐变吗？
这是一些旧的Digg风格评论的好例子.我正在寻找这样的动画,从绿色到黄色
解决方法
使用jQuery几乎不可能直接动画背景,至少我认为没办法.这有一种方法：
- -webkit-transition: background 5s ;
- -moz-transition: background 5s ;
- -ms-transition: background 5s ;
- -o-transition: background 5s ;
- transition: background 5s ;
这确保了转型.例如,您可以在CSS中执行此操作：
- .background_animation_element{
- -webkit-transition: background 5s ;
- -moz-transition: background 5s ;
- -ms-transition: background 5s ;
- -o-transition: background 5s ;
- transition: background 5s ;
- background: rgb(71,234,46);
- background: -moz-linear-gradient(top,rgba(71,46,1) 0%,rgba(63,63,1) 100%);
- background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,1)),color-stop(100%,1)));
- background: -webkit-linear-gradient(top,1) 100%);
- background: -o-linear-gradient(top,1) 100%);
- background: -ms-linear-gradient(top,1) 100%);
- background: linear-gradient(top,1) 100%);
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#47ea2e',endColorstr='#3f3f3f',GradientType=0 );
- }
- .background_animation_element.yellow{
- background: rgb(247,247,49);
- background: -moz-linear-gradient(top,rgba(247,49,1) 100%);
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f731',GradientType=0 );
- }
- $('.background_animation_element').addClass('yellow');
