使用jQuery動畫CSS3漸變位置

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來動畫頂部的不透明度。

這是一步一步的

1. 創建一個固定大小的包裝器，讓我們說“寬度：200px”和“高度：100px”（我使用包裝器，以便更容易調整其中div的位置）
2. 創建2個與包裝器大小相同的div，給出不同的背景漸變但是同時使用相同的內容，因此在視覺上唯一改變的是背景漸變。
3. 添加“position：relative;” 並調整將在頂部的div的位置，在這種情況下box2的“bottom：100px;” （請注意它與包裝器和div的高度相同的值。這使得頂部的div向上移動100px，將自身定位在相對於包裝器的下部div上...這不可能不使用“位置：相對;”在頂部div）
4. 使用您首選的方法為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中的漸變-----

.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來兩次編寫相同的內容。

要查看此信息，請轉到以下鏈接..

鏈接到示例

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的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（）函數移動，創建淡入淡出位置滑動的效果

Answer 6

我認為你應該通過使用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