jQuery가있는 애니메이션 번호 (반 카운터 다운)?
-
06-07-2019 - |
문제
jQuery를 사용하여 4000으로 빠르게 4000으로 빠르게 변화하는 숫자 값 (5000)을 만들려고합니다. 지금은 다음을 사용하여 다음을 잘합니다.
mod(".class",4000,"add");
function mod(id,value,type){
var numb = $(id).html();
var current_value = parseInt(numb);
do {
if(type == "add")
increment(id);
else
decrement(id);
current_value = parseInt(numb);
}while(current_value != value);
function decrement(id){
$(id).html(current_value-1);
}
function increment(id){
$(id).html(current_value+1);
}
}
아마도 그것이 가장 좋은 방법이 아니라는 것을 알고 있지만, 내가해야 할 일은 현재 값에서 설정 값으로 매우 빠르게 숫자를 카운트 다운 (또는 UP)입니다. 이 방법으로 내가 의도 한 것은 SetInterval 또는 Settimeout을 사용하여 지연되는 것이었지만 전체 스크립트가 실패하게됩니다.
모든 조언에 감사하지만이 겉보기에 간단한 작업을 위해 큰 플러그인을 사용하지 않는 것이 좋습니다.
해결책
당신이 제공 한 코드를 실행했을 때, 나는 무한 루프에 걸렸다. DO 루프가 끝나면
current_value = parseInt(numb);
그러나 마비의 값은 함수의 시작 부분에만 설정되므로 영원히 계속됩니다. 당신이 그것을 바꾸면
current_value = parseInt($(id).html());
그런 다음 잘 작동합니다. 즉시 발생하는 것 같습니다.
나는 상당히 잘 작동하는 타임 아웃을 사용하여 애니메이션을 달성하는 방법을 해킹했지만 여전히 JavaScript를 처음 접하는 것이 더 효율적인 접근 방식이 있는지 모르겠습니다. 두 번째 매개 변수를 설정하여 설정 타임 아웃으로 전달하여 원하는 속도를 얻으십시오. 증분/감소 값을 변경하려면 감속을 변경하십시오. dir
.
function mod2(id, value) {
var numb = $(id).html();
var current_value = parseInt(numb);
// determine direction to go
var dir = 1;
if (current_value - value > 0) {
dir *= -1;
}
getThere(id, current_value, value, dir);
}
function getThere(id, current_value, target_value, dir) {
current_value += dir;
$(id).html(current_value);
if (current_value != target_value) {
setTimeout("getThere('"+id+"',"+current_value+","+target_value+","+dir+")", 10);
}
}
다른 팁
여기서하고있는 일은 DOM을 여러 번 빠르게 업데이트하는 것입니다. 결과적으로 브라우저는 모든 변경 사항을 수행 할 때까지 기다릴 수 있으며 페이지를 다시 주목합니다. 따라서 숫자가 4000으로 끝날 때까지 시각적 변화를 보지 못할 것입니다.
예, 사용해야합니다 setTimeout
또는 setInterval
/ clearInterval
. 또는 코드의 명확성을 위해 jQuery "대기"플러그인:
// (code to get new value goes here)
$('.class').wait(100, function(){
$(this).text(newValue);
});
대신에 html()
, 나는 사용했다 text()
, HTML 구조를 변경할 필요가없는 것처럼 보입니다.
Settimeout과의 Thorn의 접근 방식이 마음에 들지만 2 개의 기능으로 압축하여 Window로드 후 시작하여 카운터를 업데이트하기 전에 페이지가로드되었는지 확인합니다.
var counterTimeout = 10; // time between increments in ms
$(window).load(function() {
mod('class', 'add', 4000);
});
function mod(class, type, targetVal) {
var $class = $(class);
var numb = parseInt($class.html());
numb = (type == 'add') ? numb + 1 : numb - 1;
$class.html(numb);
if (numb != targetVal) {
setTimeout('mod("' + class + '","' + type + '",' + targetVal)', counterTimeout);
}
}
기본 케이스는 $ class.html () 이벤트에서 만족하지 않습니다. html ()는 다른 경우 대상 val보다 'add'또는 하위의 경우 TargetVal보다 높은 값으로 시작합니다. 기능 호출을하기 전에 이것이 발생하지 않도록해야합니다.