JavaScript의 애니메이션 타이밍 기능을 어떻게 변경합니까?

CSS 중심에 이미지를 회전시키는 애니메이션이 있습니다. 자바 스크립트에서 프로그래밍 방식으로 animation-timing-function과 -webkit-animation-timing-function 등을 바꿀 수 있기를 원합니다. 다음 코드는 내가 시도 무엇 :JavaScript의 애니메이션 타이밍 기능을 어떻게 변경합니까?

<div id="content"> <div id="container"> 
<div id="outerQ"></div> <div id="innerQ"> 
</div> 
</div> 
<div id="logo"></div> 
<span id="sp"></span> 
<input type="button" id="linear" value="Linear"/> 
<input type="button" id="ease" value="Ease in and out"/> 
</div>

SCRIPT :

<head> 
    <script src="http://code.jquery.com/jquery-2.0.1.min.js"></script> 
<script> 
     $(document).ready(function() 
     { 
      $("#linear").click(function() 
      { 
       $("#innerQ").css("-webkit-animation-timing-function", "linear"); 
      }); 

      $("#ease").click(function() 
      { 
       $("#innerQ").css("-webkit-animation-timing-function", "ease-in-out"); 
      }); 
     }); 
    </script>

CSS :

<style> 
      body 
      { 
       background: #018a9a; 
       margin: 20px; 
      } 

      #content 
      { 
       width: 566px; 
       height: 120px; 
       position: fixed; 
       top: 50%; 
       left: 50%; 
       margin-top: -80px; 
       margin-left: -278px; 
      } 

      #outerQ 
      { 
       width: 96px; 
       height: 120px; 
       background-image: url('outerQ.png'); 
      } 

      #innerQ 
      { 
       width: 96px; 
       height: 120px; 
       background-image: url('innerQ.png'); 
       position: absolute; 
       left: 0; 
       top: 0; 
      } 

      #container 
      { 
       width: 96px; 
       height: 120px; 
       float: left; 
      } 

      #logo 
      { 
       width: 470px; 
       height: 120px; 
       background-image: url('LogoLarge.png'); 
       float: left; 
      } 

      #sp 
      { 
       clear: both; 
      } 

      @keyframes spin 
      { 
       from { 
        transform: rotate(0deg); 
       } 
       to { 
        transform: rotate(360deg); 
       } 
      } 

      @-webkit-keyframes spin 
      { 
       from { 
        -webkit-transform: rotate(0deg); 
       } 
       to { 
        -webkit-transform: rotate(360deg); 
       } 
      } 

      @-moz-keyframes spin 
      { 
       from { 
        -moz-transform: rotate(0deg); 
       } 
       to { 
        -moz-transform: rotate(360deg); 
       } 
      } 

      #innerQ 
      { 
       /*IE 10*/ 
       animation-name: spin; 
       animation-iteration-count: infinite; 
       animation-timing-function: linear; 
       animation-duration: 1.3s; 
       animation-play-state: running; 
       transform-origin: 48px 50.5px; 

       /*Chrome*/ 
       -webkit-animation-name: spin; 
       -webkit-animation-iteration-count: 1; 
       -webkit-animation-timing-function: linear; 
       -webkit-animation-duration: 1.3s; 
       -webkit-animation-play-state: running; 
       -webkit-transform-origin: 48px 50px; 

       /*Firefox*/ 
       -moz-animation-name: spin; 
       -moz-animation-iteration-count: infinite; 
       -moz-animation-timing-function: linear; 
       -moz-animation-duration: 1.3s; 
       -moz-animation-play-state: running; 
       -moz-transform-origin: 48px 50px; 
      } 
     </style> 
</head> 
<body>

HTML : 내가 크롬을 사용하기 때문에

 <input type="button" id="linear" value="Linear"/> 
     <input type="button" id="ease" value="Ease in and out"/> 
    </div> 


</body>

나는 버튼이 아무것도하지 클릭, 여기 웹킷을 사용하고 있습니다. 또한 'animation-iteration-count'및 'animation-duration'을 변경하려고하지만 작동하지 않습니다. 유일하게 작동하는 것은 '-webkit-animation-play-state'입니다. 나는 또한 시도했다 :

$("#innerQ").style.WebkitAnimationTimingFunction = "ease-in-out";

그것은 역시 효과가 없다. 페이지가로드 된 후 이러한 속성을 변경하는 방법이 있습니까? 감사합니다

출처

2013-06-25 Rob Crocombe

시도'$ ("#의 innerQ") [0] .style. ...'또는'document.getElementById를 ("innerQ"). 스타일. ...'. jQuery 컬렉션에는'style' 속성이 없습니다. – Bergi

나머지 HTML은 어디에 있습니까 ?? id가 'innerQ'인 요소는 어디에 있습니까 ??? –

나는 그 다른 것들을 시도해 보았고, 그것들도 작동하지 않습니다. –

function function_name() { 
    document.getElementById('innerQ"').className = "innerQ"; 
}

CSS

.innerQ 
     { 
      //you css code(put all timing stuff here!!!) 
     } 

//Step 1--->Put you desired css animation in a css class 
//Step 2--->add that css class with javascript(className) 
//Step 3---->Call function animation on click of the button

출처

2013-06-25 11:58:02

코드를 commentBox에 삽입하지 마십시오 !!! 질문에 올려 놓거나 바이올린을 시도해보십시오 !!! meta stackoverflow로 가서 질문하는 법을 배우십시오 !!! –

JavaScript의 애니메이션 타이밍 기능을 어떻게 변경합니까?

답변

관련 문제