Question

是否可以使用jQuery为CSS3-gradient-color的位置设置动画？

我想从此动画

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毫秒为单位

提前谢谢你！

Answer 1

有创意 ..这是我如何在没有额外插件的情况下进行渐变过渡的示例..

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

这是一步一步

创建一个固定大小的包装器，可以说“width：200px”和“height：100px”（我使用包装器，以便更容易调整div内部的位置）
创建2个与包装器大小相同的div，给出不同的背景渐变但是对两者使用相同的内容，因此在视觉上唯一改变的是背景渐变。
添加“position：relative;”并调整将在顶部的div的位置，在这种情况下box2的“bottom：100px;” （请注意它与包装器和div的高度相同的值。这使得顶部的div向上移动100px，将自身定位在相对于包装器的下部div上...这不可能不使用“位置：相对;”在顶部div）
使用您首选的方法为div的不透明度设置动画我在此示例中使用了fadeToggle

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>

CSS中的GRADIENTS -----

.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动画----

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

你可以对第三个div进行分层，这样你就不需要在第一个div之外添加第二个包装器并在内部包装器关闭后放置第三个div来两次编写相同的内容。

要查看此内容，请转到以下链接..

Link to example

Answer 2

您可以根据需要使渐变两倍大（意味着在前50％中包含第一个渐变，在最后50％中包含第二个渐变）并使用此代码：

-webkit-background-size: 200%;
-moz-background-size: 200%;
-o-background-size: 200%;
-ms-background-size: 200%;
background-size: 200%;

关于初始项目和。并非所有的前缀都可以使用，但如果他们稍后添加它，我会这样做是为了兼容性

background-position:bottom;

悬停

Answer 3

CSS渐变过渡尚未在任何浏览器中实现，尽管它在规范中。所以，你不能这样做。你需要用SVG做这件事（如果你很勇敢的话）。

Answer 4

这是我的一个项目的代码片段，我在其中使用jquery进行渐变过渡。这可能会对您有所帮助：

<div id="gr_anim"> Change Gradient </div>

var p1 = t = 0;
var p2 = 100;
function hello() {
p1 = p1 + 5;
p2 = 100 - p1;
if(p1 <= 100 && p2 >= 0) {
    $('#gr_anim').css({
        'background-image':'-moz-linear-gradient('+ p1 +'% '+ p2 +'% 45deg, #000, #fff)'
    });
} else {
    clearTimeout(t);
}
t = setTimeout('hello()',1000);}
$( function() {
hello();});

Answer 5

我认为你应该通过使用jquery ui的switchClass来尝试它，你需要添加JqueryUI和一个指向依赖效果核心的链接 http://jqueryui.com/demos/switchClass/

类似的东西：

<script type="text/javascript">
    $(function() {
        $("#button").click(function () {
            $(".divPropertyStart").switchClass("divPropertyStart", "divProperty", 1000);
            $(".divProperty").switchClass("divProperty", "divPropertyStart", 1000);
            return false;
        });
    });
</script>

<style type="text/css">
    .divPropertyStart { background: -moz-linear-gradient(top, #FF0000 0%, #FF0000 0%, #FFFFFF 0%, #FFFFFF 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000), color-stop(0%,#FF0000),    color-stop(0%,#FFFFFF), color-stop(100%,#FFFFFF)); }

    .divProperty { background: -moz-linear-gradient(top, #FF0000 0%, #FF0000 50%, #FFFFFF 50%, #FFFFFF 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000), color-stop(50%,#FF0000), color-stop(50%,#FFFFFF), color-stop(100%,#FFFFFF)); }
</style>

<div class="divPropertyStart"></div>

<a href="#" id="button" class="ui-state-default ui-corner-all">Toggle Effect</a>

这适用于我@localhost

Lauw

Answer 6

如何设置渐变适用的容器的宽度？

（使用JQuery的Chrome示例）

HTML：

<div id='test'>
</div>

<span id='click_me'>
</span>

的CSS：

 #test 
 { 
      width:400px; height: 400px; float:left;           
      background: linear-gradient(90deg, #5e5e5e 0%, #000 100%);
 }

JS：

$('#click_me').on('click',function () 
   { 
      $('#test').animate({'width':'+=400'},400); 
   } 
);

有效处理

编辑：关于原始问题，我在这里犯了一个错误。我将在这里留下答案，但我认为通过使用更多元素而不是一个元素，淡入淡出的位置可以在容器div中使用animate（）函数移动，从而创建淡入淡出位置滑动的效果

使用jQuery动画CSS3渐变位置

6 个答案: