使用jQuery動畫CSS3漸變位置

Question

是否可以使用jQuery動畫化CSS3漸變顏色的位置？

我想從這個

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個不同梯度的完全相同的divs層疊在一起。然後我使用jQuery動畫在頂部的一個的不透明度..

這裏是一步一步

1. 創建一個固定大小的包裝可以說「寬度：200像素」和「高度：100像素「（我使用包裝，以便更容易調整其中的div的位置）
2. 創建2個尺寸與包裝相同的尺寸給出不同的背景漸變，但使用相同的內容，以便在視覺上只有這兩個變化的東西是背景漸變。
3. 加「position：relative;」並調整位於頂部的div的位置，在這種情況下box2的「bottom：100px;」 （注意它與包裝器和div的高度相同，這使得頂部的div相對於包裝器向上移動100px，將它自己定位在較低的div上。如果沒有使用「position：relative」，這是不可能的。在頂部的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"); 
    }); 
}); 

，使你不需要通過添加第二個包裝的第一個外，並把第三格內包裝後關閉兩次寫相同的內容，您可以層的第三格..

查看此去下面的鏈接..

Link to example

Answer 2

，我認爲你應該使用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 3

CSS梯度轉移尚未在任何眉頭實施儘管它在規範中。所以，你不能這樣做。你需要用SVG來做到這一點（如果你勇敢的話）。

Answer 4

這是我的一個項目的代碼片段，我用漸變過渡使用jquery.This可以幫助你：

<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

可以使梯度的兩倍大（這意味着包括第一梯度的第一個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 6

怎麼樣動畫，其漸變應用容器的寬度是多少？

（例如Chrome瀏覽器使用jQuery）

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