如何使用jquery對css漸變進行動畫處理

Question

我想使用jquery對css漸變進行動畫處理，但找不到任何解決方案。有人有想法嗎？事情是，我不能從一個類動畫到另一個，因爲我的rgba是隨機的（我使用mousemouve事件做了一些小事）。

這裏是我的實際代碼

$(this).css(
    {background: '-webkit-gradient(linear, left top, right top, from(rgba('+ a +','+ b +','+ c +','+ alpha +')), to(rgba('+ a2 +','+ b2 +','+ c2 +','+ alpha +')))' 
}); 

但我想這樣做會是這樣的：

$(this).stop().animate(
      {background: '-webkit-gradient(linear, left top, right top, from(rgba('+ a +','+ b +','+ c +','+ alpha +')), to(rgba('+ a2 +','+ b2 +','+ c2 +','+ alpha +')))'}, 
      { 
       duration: 1500, 
       easing:  'easeOutBounce' 
      } 
     ); 

我得到的是，它並沒有改變漸變，但只有最好的第一個rgba的背景顏色。

基本上，CSS（）太過分侵略，我希望它平滑。我試圖只使用背景色的動畫，它工作正常，但不是漸變。

有什麼想法？ 在此先感謝。

編輯：以下是完整的JS background.js

編輯＃2：找到我這裏所有的答案。 script on jqueryscript.net

Answer 1

注意，不能確定的

-webkit-gradient(linear, left top, right top, from(rgba()), to(rgba())) 

語法，爲了是準確的？請參閱linear-gradient,Using Gradients。在低於片，改爲

-webkit-linear-gradient(left top, rgba(), rgba()) 

此外，easing選項​​不會出現內jquery是標準;要求jquery ui或jQuery Easing Plugin。 jquery ui加載到腳本中。

jquery的.animate()可能需要一個「顏色」插件來動畫顏色properties。雖然，可以利用step功能，內.animate()的options，執行任務的每個動畫的‘步驟’，見

.animate()，在step

一個函數被調用用於每個動畫屬性每個動畫元素。此功能提供了修改Tween 對象的機會，以便在設置屬性之前更改該屬性的值。

的properties，在這裏，被定義與border:"0" - 雖然與jQuery UI的顏色動畫顯得可能Color Animation - 在低於片step功能使用。

嘗試

$(document).ready(function() { 
 

 
    $("body").mousemove(function (event) { 
 

 
     var sw = $(window).width(), 
 
      sh = $(window).height(), 
 
      valueX = event.pageX, 
 
      valueY = event.pageY; 
 

 
     var fX = (valueX/sw), 
 
      fY = (valueY/sh); 
 

 
     var alpha = ((fX/2) + (fY/2)); 
 

 
     var r = Math.round(((Math.floor((Math.random() * 200) + 100)))), 
 
      g = Math.round(((Math.floor((Math.random() * 200) + 100)))), 
 
      b = Math.round(((Math.floor((Math.random() * 200) + 100)))), 
 
      r2 = Math.round(((Math.floor((Math.random() * 100) + 1)))), 
 
      g2 = Math.round(((Math.floor((Math.random() * 100) + 1)))), 
 
      b2 = Math.round(((Math.floor((Math.random() * 100) + 1)))); 
 

 
     console.log('x:' + fX + ' - y:' + fY + ''); 
 
     console.log('rgba(' + r + ',' + g + ',' + b + ',' + alpha + ')'); 
 
     console.log('rgba2(' + r2 + ',' + g2 + ',' + b2 + ',' + alpha + ')'); 
 

 
     // animate the background color on mousemove 
 
     $(event.target).stop().animate({ 
 
      border:"0" 
 
     }, { 
 
      duration: 1500 
 
      , easing: 'easeOutBounce' 
 
      , step: function() { 
 
       $(this).css('background' 
 
          ,'-webkit-linear-gradient(left top, rgba(' 
 
          + r +','+ g +','+ b +',' 
 
          + alpha +'), rgba(' 
 
          + r2 +','+ g2 +','+ b2 +','+ alpha +')') 
 
     } 
 
     }); 
 

 
    }); 
 
});

body { 
 
    width : 646px; 
 
    height : 615px; 
 
    background-color : transparent; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

的jsfiddle http://jsfiddle.net/guest271314/vystqodj/

Answer 2

CSS是最好的方法。向元素添加必要的過渡/動畫。有幾個具有不同背景漸變的類，然後使用jQuery根據需要添加/刪除類。據我所知，CSS漸變背景不通過transition進行動畫製作。您可能需要使用keyframe動畫。您可能還需要動畫回調以確保動畫不會因爲鼠標事件而發生跳轉（懸停，點擊等）。用鼠標事件實現一個平滑的解決方案可能相當困難。

有關關鍵幀漸變動畫的示例，請參閱http://thecodeplayer.com/walkthrough/animating-css3-gradients。許多人使用的一個技巧是改變背景位置，而不是漸變本身。在這種情況下，過渡可以奏效。

或者，jQuery Transit（http://ricostacruz.com/jquery.transit/）可能會這樣做，但未經測試且未記錄。