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

推荐答案

更新:如今，所有主流浏览器都支持 CSS 动画，这比 jQuery 更可靠.如需参考，请参阅 Rohit 的回答.

UPDATE: These days, all major browsers support CSS animations, which are way more reliable than jQuery. For reference, see Rohit's answer.

旧答案:

用 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屋！