1
JavaScript/jQuery를 통해 텍스트를 크기 조정하고 이동해야합니다. 페이드 인 및 페이드 아웃을해야하기 때문에 jQuerys animate()를 사용할 수 없습니다. 더 많은 요소 (최종 결과 : 백그라운드에서 "날아 다니는", 다른 방향으로 이동하고 페이드 아웃)을 반복해야합니다.자바 스크립트로 텍스트 크기를 조절하고 부드럽게 이동
내 문제 : 원활하게 실행되지 않아 CPU 사용량이 많이 발생합니다.
<!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>
JS BIN에 예를 실행 : 여기 버전을 박탈합니다.
제안 사항? 보너스 : 어떻게 CPU 부하를 줄이기 위해? 고마워요!
스테
내가 휴대 전화에 매우 성공적으로 몇 년 전에이 라이브러리를 사용했습니다
'.animate()'를 사용하면 무엇이 문제입니까? http://jsbin.com/oxode/2 'animate'를 사용하여 아무런 문제없이 페이드 인/아웃 할 수 있어야합니다. –
@Russ Cam : 한 번의 실행 (및 다른 작업)에서 불투명도 늘리기 및 줄이기 나를시키지 마. 내가 할 수 있었으면 좋겠어 ... –
어떨까요? 텍스트가 연속적으로 늘어나고 페이지의 위치가 오른쪽 아래로 이동하게하는'animate '호출이 여러 번 나뉘었을 때 불투명도를 변경할 호출을 허용하는 방법은 어떻습니까? 페이드 인 및 페이드 아웃? –