jquery로 css grandient 변경을 애니메이션하는 방법

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()는 너무 공격적이어서 부드럽게 처리하고 싶습니다. backgroundcolor 만 사용하여 애니메이트를 사용하려고했지만 괜찮 았지만 그라디언트는 작동하지 않았습니다.

아이디어가 있으십니까? 미리 감사드립니다.

편집 : 내 모든 답변 여기 찾기 : 다음은 전체 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()) 

에 easeOutBounce이 jquery 내에서 표준으로 표시하지 easing 옵션을 변경; jquery ui 또는 jQuery Easing Plugin이 필요합니다. 로드 된 스크립트에 jquery UI를 추가했습니다.

jquery의 .animate()에 색상을 적용하려면 "색상"플러그인이 필요합니다. properties.비록 각각의 애니메이션 속성이라고 할 step

에서

.animate() 표시, 애니메이션의 각 "단계"에 대한 작업을 수행하기 위해, .animate()의 options 내의 함수를 step 기능을 이용할 수있다 각 애니메이션의 요소의 이 함수는 Tween 개체를 수정하여 속성을 설정하기 전에 값을 변경하도록합니다.

는 properties은 여기 border:"0" 정의된다 - 비록 JQuery와 UI 컬러 애니메이션과 함께 표시 할 수 Color Animation - 아래 편에 step 함수를 이용했다.

는 jsfiddle

$(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>

을 시도 http://jsfiddle.net/guest271314/vystqodj/ 당신은 jQuery.animate()와 함께 할 수 있기를하지 않을거야하지만하여 setInterval을 사용하여 직선 자바 스크립트 구현을 쓸 수

Answer 2

여기에서 CSS가 가장 좋습니다. 필요한 전환/애니메이션을 요소에 추가하십시오. 배경 그라디언트가 다른 여러 클래스를 만든 다음 jQuery를 사용하여 필요에 따라 클래스를 추가/제거합니다. 내 지식으로는 CSS 그라데이션 배경이 transition을 통해 움직이지 않습니다. 아마도 keyframe 애니메이션을 사용해야 할 것입니다. 애니메이션 이벤트가 마우스 이벤트 (마우스 오버, 클릭 등)를 기반으로하는 경우 애니메이션이 점프하지 않도록 애니메이션 콜백이 필요할 수도 있습니다. 마우스 이벤트와 함께 매끄러운 솔루션을 구현하는 것은 상당히 어려울 것입니다.

키 프레임 그라디언트 애니메이션의 예는 http://thecodeplayer.com/walkthrough/animating-css3-gradients을 참조하십시오. 많은 사람들이 사용하는 트릭 중 하나는 그라디언트 자체가 아니라 배경 위치를 변경하는 것입니다. 이 경우 전환이 가능합니다.

또는 jQuery Transit (http://ricostacruz.com/jquery.transit/)은 테스트를 수행 할 수 있지만 테스트되지 않았으며 문서화되지 않았습니다.