jQuery가있는 애니메이션 번호 (반 카운터 다운)?

StackOverflow https://stackoverflow.com/questions/1627521

문제

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보다 높은 값으로 시작합니다. 기능 호출을하기 전에 이것이 발생하지 않도록해야합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top