Animierte Nummern (halb-Countdown) mit JQuery?

Question

Ich versuche, einen numerischen Wert zu machen, 5000 sagen, schnell auf einen anderen Wert ändern, sagen 4000, mit JQuery. Im Moment habe ich tun, um diese fein mit:

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);
    }
}

Ich weiß, es ist wahrscheinlich nicht der beste Weg, um darüber zu gehen, aber ich brauche, was es Countdown zu tun ist (oder oben) die Zahlen sehr schnell vom aktuellen Wert auf den eingestellten Wert. Was ich mit dieser Methode bestimmt war eine Verzögerung jedoch mit setInterval oder setTimeout zu haben, die das ganze Skript ziemlich schlecht ausfallen macht.

Jede Beratung sehr geschätzt wird, aber ich würde es vorziehen, nicht große Plug-in für diese scheinbar einfache Aufgabe zu verwenden.

Answer 1

Wenn ich den Code lief Sie geliefert, ich war in einer Endlosschleife gefangen. Am Ende der do-Schleife, Sie haben

current_value = parseInt(numb);

aber der Wert von taub wird nur am Anfang der Funktion gesetzt, so geht es immer weiter. Wenn Sie das ändern

current_value = parseInt($(id).html());

dann funktioniert es gut. Abgesehen davon, dass es sofort passieren wird.

gehackt ich eine Methode, um die Animation mit Timeouts zu erreichen, die recht gut zu funktionieren scheint, aber wie ich immer noch ziemlich neu in Javascript, bin ich nicht weiß, ob es einen effizienteren Ansatz ist oder nicht. Einfach zwicken den zweiten param zu SetTimeout geleitet, um die gewünschte Geschwindigkeit zu erhalten. Und wenn Sie den Aufwärts- / Abwärts Wert ändern wollen, nur die Verzögerung von dir ändern.

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);
    }
}

Answer 2

Was machen Sie denn hier wird die Aktualisierung des DOM oft kurz hintereinander. Als Ergebnis wird der Browser warten, bis Sie alle Ihre Änderungen gemacht haben, und erst dann wird die Seite neu zeichnen. Also, werden Sie keine optische Veränderung zu sehen bekommen, bis die Zahl des ganzen Weg geht bis auf 4000.

Ja, Sie brauchen eine setTimeout oder setInterval / clearInterval zu verwenden. Oder für die Klarheit der Code, können Sie verwenden, um die jQuery "wait" Plugin :

// (code to get new value goes here)

$('.class').wait(100, function(){
    $(this).text(newValue);
});

Statt html() habe ich text() verwendet, da es aussieht wie Sie benötigen keine HTML-Struktur zu ändern.

Answer 3

Ich mag Dorn Ansatz mit setTimeout, aber ich würde es zwei Funktionen kondensieren nach unten und es nach dem Fenster Last starten Sie die Seite, um sicherzustellen, hat vor geladen Aktualisierung der Zähler:

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);
    }
}

Der Basisfall ist im Fall $ class.html nicht erfüllt ist () beginnt mit einem Wert, der höher ist als der targetVal im Fall von ‚Hinzufügen‘ oder niedriger ist als die targetVal im anderen Fall. Sie würden dies nicht der Fall vor, um sicherzustellen, haben Sie den Funktionsaufruf zu machen.