使用jQuery对CSS3渐变位置进行动画处理 [英] animate CSS3 gradient-positions using jQuery

问题描述

是否可以使用jQuery为CSS3渐变颜色设置动画？

Is it possible to animate the position of a CSS3-gradient-color using jQuery?

我想从这个动画

background: -moz-linear-gradient(top, #FF0000 0%, #FF0000 0%, #FFFFFF 0%,
   #FFFFFF 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000), color-stop(0%,#FF0000),
    color-stop(0%,#FFFFFF), color-stop(100%,#FFFFFF)); /* webkit */

此

background: -moz-linear-gradient(top, #FF0000 0%, #FF0000 50%, #FFFFFF 50%,
    #FFFFFF 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000),
    color-stop(50%,#FF0000), color-stop(50%,#FFFFFF), color-stop(100%,#FFFFFF)); /* webkit */

在xx毫秒

提前感谢！

推荐答案

有创意。这是一个例子，做渐变过渡没有额外的插件。

Be creative.. This is an example of how I do gradient transitions without extra plugins..

我使用2个相同的div与不同的渐变分层一个在另一个。然后我使用jquery来动画一个顶部的不透明度。

I use 2 identical divs with different gradients layered one on top of the other. Then I use jquery to animate the opacity of the one on top..

这是一步一步

1. 创建一个固定大小的封装容器可以说width：200px和height：100px（我使用包装器，以便更容易调整其内部的div位置）


2. 创建2个div，它们的大小与包装器的大小相同，给出了两个不同的背景渐变，但是使用相同的内容，所以视觉上唯一的变化是背景渐变。


3. 添加position：relative;并调整将位于顶部的div的位置，在这种情况下box2为bottom：100px; （注意它的值与包装器和div的高度相同，这使得在顶部的div将向上移动100px，相对于包装器定位在下部div ...这是不可能的，不使用

HTML -----

HTML-----

<a href="#">Click to change gradient</a><br>
<div align="center" style="width:200px; height:100px;">
     <div style="width:200px; height:100px;" class="box1" id="box1">CONTENT BOTTOM DIV</div>
     <div style="width:200px; height:100px; position:relative;" class="box2" id="box2">CONTENT TOP DIV</div>
</div>

GRADIENTS IN CSS -----

GRADIENTS IN CSS-----

.box1 {
background: rgb(237,144,23); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(237,144,23,1) 0%, rgba(246,230,180,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(237,144,23,1)), color-stop(100%,rgba(246,230,180,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(237,144,23,1) 0%,rgba(246,230,180,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(237,144,23,1) 0%,rgba(246,230,180,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(237,144,23,1) 0%,rgba(246,230,180,1) 100%); /* IE10+ */
background: linear-gradient(top,  rgba(237,144,23,1) 0%,rgba(246,230,180,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed9017', endColorstr='#f6e6b4',GradientType=0 ); /* IE6-9 */
}
.box2 {
background: rgb(246,230,180); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(246,230,180,1) 0%, rgba(237,144,23,1) 100%);/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,230,180,1)), color-stop(100%,rgba(237,144,23,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* IE10+ */
background: linear-gradient(top,  rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */
}

jQuery animation ----

jQuery animation----

$(document).ready(function(){ 
    $("a").click(function(){
            $("#box2").fadeToggle(100, "linear");   
    });
});  

您可以分层第三个div，这样您就不需要通过添加第二个在第一个之外的包装，并放置第三个div后内封装关闭..

you can layer a third div so that you dont need to write the same content twice by adding a second wrapper outside the first one and placing the third div after the inside wrapper closes..

查看这个转到以下链接..

to view this go to the following link..

链接到示例

这篇关于使用jQuery对CSS3渐变位置进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！