jQuery动画div背景颜色渐变?

前端之家收集整理的这篇文章主要介绍了jQuery动画div背景颜色渐变?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试用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 );

}

并且,使用jQuery,添加删除黄色类:

$('.background_animation_element').addClass('yellow');

这将确保由于CSS文件中的转换持续时间属性而逐渐过渡.

原文链接:https://www.f2er.com/jquery/179036.html

猜你在找的jQuery相关文章