如何更改 JavaScript 中的动画计时功能？
Posted
技术标签:
【中文标题】如何更改 JavaScript 中的动画计时功能？【英文标题】：How do I change animation-timing-function in JavaScript? 【发布时间】：2013-06-22 04:56:21 【问题描述】：我在 CSS 中有一个动画，它围绕其中心旋转图像。我希望能够在 javascript 中以编程方式更改 animation-timing-function 和 -webkit-animation-timing-function 等。这是代码和我尝试过的：
<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>
脚本：
<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>
我在这里使用 webkit，因为我使用 Chrome，单击按钮什么也不做。我还想更改“动画迭代计数”和“动画持续时间”，但这些不起作用。唯一有效的是“-webkit-animation-play-state”。我也试过：
$("#innerQ").style.WebkitAnimationTimingFunction = "ease-in-out";
那也行不通。有没有办法在页面加载后更改这些属性？谢谢
【问题讨论】：
试试$("#innerQ")[0].style.… 或document.getElementById("innerQ").style.…。 jQuery 集合没有 style 属性。
html 的其余部分在哪里？ id 为“innerQ”的元素在哪里？？？
我已经尝试了其他方法，它们也不起作用。
你尝试过什么？如果需要，可以链接。
我不太明白你的答案，我尝试将函数作为点击事件并在那里更改类。那没有用。链接是什么？
【参考方案1】：
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
【讨论】：
永远不要把你的代码放在评论框里！！！把它放在你的问题中或尝试一些小提琴！！！转到 meta *** 并学习如何提问！！！以上是关于如何更改 JavaScript 中的动画计时功能？的主要内容，如果未能解决你的问题，请参考以下文章
非活动选项卡中的 Javascript/Jquery 计时错误