如何使用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/）可能会这样做，但未经测试且未记录。