Hi,
I'm having a text scaled and moved via JavaScript / jQuery. I can't use jQuerys animate() because it has to fade in and out and has to be repeated and with more elements (end result: "flying" from the background, moving in different directions and fading out).
My problem: It's not running smoothly and causes quite the cpu-usage. Here's a stripped down version:
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
var steps = 300; // steps from start to finish
// the final css values
var endValueTop = 300;
var endValueLeft = 300;
var endValueFontSize = 100;
// the current css values (get encreased in doAnimation())
var currentValueTop = 100;
var currentValueLeft = 100;
var currentValueFontSize = 0;
// the added values in each step
var stepsTop = (endValueTop - currentValueTop) / steps;
var stepsLeft = (endValueLeft - currentValueLeft) / steps;
var stepsFontSize = (endValueFontSize - currentValueFontSize) / steps;
function doAnimation() {
// increase current values
currentValueTop += stepsTop;
currentValueLeft += stepsLeft;
currentValueFontSize += stepsFontSize;
// apply them
$("#hello").css({
top: currentValueTop,
left: currentValueLeft,
fontSize: currentValueFontSize
});
// restart if there are steps left
if (steps--) {
window.setTimeout(function(){
doAnimation();
}, 50);
}
}
// start the first time
doAnimation();
</script>
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
body { position: relative; }
p#hello { position: absolute; top: 100px; left: 100px; font-size: 0px; }
</style>
</head>
<body>
<p id="hello">Hello World</p>
</body>
</html>
Running example on JS BIN.
Any suggestions? Bonus: How to reduce the cpu load? Thanks a lot!
Steffen