jQuery的动画背景的div渐变色？ [英] jQuery animate div background color gradient?

问题描述

我试图建立与jQuery的背景动画从一个梯度变化到另一个。我知道你可以使用.animate（）函数来改变固体背景颜色，但这样也可以为渐变做？

I'm trying to build a background animation with jQuery which changes from one gradient to another. I know you can use the .animate() function to change solid background colors, but can this also be done for gradients?

下面是一些旧Digg的风格的注释一个很好的例子。我希望做这样的事情动画由绿变黄

Here's a good example from some old Digg-style comments. I'm looking to do something like this animating from green to yellow

推荐答案

动画背景是直接用jQuery几乎是不可能的，至少我能想到的没办法。有一个办法，虽然这一点：

Animating the backgrounds directly is nearly impossible with jQuery, at least I could think of no way. There is a way though with this:

-webkit-transition: background 5s ;
-moz-transition: background 5s ;
-ms-transition: background 5s ;
-o-transition: background 5s ;
transition: background 5s ;

这确保有一个过渡。你可以举例来说做到这一点在CSS：

That ensures that there is a transition. You could for instance do that in 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,234,46,1) 0%, rgba(63,63,63,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(71,234,46,1)), color-stop(100%,rgba(63,63,63,1)));
    background: -webkit-linear-gradient(top,  rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
    background: -o-linear-gradient(top,  rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
    background: -ms-linear-gradient(top,  rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
    background: linear-gradient(top,  rgba(71,234,46,1) 0%,rgba(63,63,63,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,247,49,1) 0%, rgba(63,63,63,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,49,1)), color-stop(100%,rgba(63,63,63,1)));
    background: -webkit-linear-gradient(top,  rgba(247,247,49,1) 0%,rgba(63,63,63,1) 100%);
    background: -o-linear-gradient(top,  rgba(247,247,49,1) 0%,rgba(63,63,63,1) 100%);
    background: -ms-linear-gradient(top,  rgba(247,247,49,1) 0%,rgba(63,63,63,1) 100%);
    background: linear-gradient(top,  rgba(247,247,49,1) 0%,rgba(63,63,63,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f731', endColorstr='#3f3f3f',GradientType=0 );

}

和，使用jQuery，添加或删除黄色类：

And, using jQuery, either add or remove the yellow class:

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

这将确保由于CSS文件中的转换时间属性逐步过渡。

That would ensure a gradual transition due to the transition duration property in the CSS file.

这篇关于jQuery的动画背景的div渐变色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！