jQuery animation erkennen, wenn das animieren?

Ist Ihre Möglichkeit zu erkennen, ob ein element zu animieren, oder zu erkennen, wenn die Werte eines Elements ändern?

Weil ich muss zum auslösen der Funktion, wenn ein element animieren. Nicht onComplete der Animation.

  • Lösen Sie es, wenn?
InformationsquelleAutor Jorge | 2011-08-09
  1. 21

    Der folgenden true zurück, wenn das ausgewählte element animiert:

    var isAnimating = $("#someid").is(':animated');

    Detail:

    http://api.jquery.com/animated-selector/

    und/oder

    http://api.jquery.com/animate/

    Schritt: Eine Funktion, die aufgerufen werden, nach jedem Schritt der animation.

    • Andy bitte kann ich nur klären, mein Verständnis der pseudo-Selektor :animierte. Das Verhalten, das ich sehe ist, dass nach dem element gestartet werden animiert ist(:animated) ist sogar wahr, wenn das element zurückgegeben wurde, um es den Ausgangspunkt. Ich bin daher mit Schritt, zu erkennen, Wann eine animation erreicht hat, es animiert position. Gibt es eine Möglichkeit zum Umschalten der pseudo-Selektor an-und ausschalten?
    • das ist seltsam, ich machte einen test hier: jsfiddle.net/aPk3y/1 und es gibt den richtigen Wert. Ich glaube nicht, dass es eine einfache Art und Weise zu manipulieren :animierte direkt.
    • Andy vielen Dank für dieses Beispiel. OK, so kann ich sehen, es funktioniert für Sie. Also ich muss irgendwo einen Fehler. Werde ich gehen Sie zurück und überprüfen Sie meinen test wieder.
    • vielleicht könnten Sie etwas von Ihrem code oder erstellen Sie ein jsfiddle oder auch einen link zu Ihrer Seite, dann könnte ich mich einen Blick auf Sie.
    InformationsquelleAutor Andy
  2. 1

    Eine einfache Möglichkeit wäre das hinzufügen eines globalen boolescher Wert, der festgelegt wird, zu true sobald die animation startet. Dann fügen Sie eine callback-Funktion, die die animation, legt es auf false wie es endet.

    var running = false;

$('#start').click(function(){

    running = true;

    $('#target').animate({opacity: 0.5},'slow',function(){

        running = false;

    });

});

    Edit: Oh, ich denke, es gibt eine Auswahl für Sie.

    • Wenn Sie diese Methode verwenden, beachten Sie, wie Sie es verwenden, weil in besonderen Situationen kann es zu einer race condition. Beispiel: 1. Click start button (1) -- running = true -- t=0ms 2. Click start button (2) -- running = true -- t=200ms 3. Animation (1) finishes -- running = false -- t=600ms 4. Animation (2) running -- running = false -- 600ms < t < 800ms 5. Animation (2) finishes -- running = false -- t=800ms
    InformationsquelleAutor Kokos
  3. 0

    Weil ich muss zum auslösen der Funktion, wenn ein element animieren. Nicht onComplete der Animation.

    Seit $(element).on(":animated", function(){ ... }); scheint nicht zu funktionieren, die einzige Art, wie ich sehen kann, ist Sie sehr einfach führen Sie die Funktion aus, die Sie anrufen möchten, wenn Sie führen Sie Ihre animation:

    $(selector).animate( . . . );
functionToCall(); //called with animate above

    Andere Lösung ist, man könnte eine eigene Bibliothek anzulegen, die Griffe ab-Animationen und übernimmt auch den Aufruf der benötigten Funktionen, sobald es beginnt zu animieren, in der einfachen Art und Weise, die ich oben beschrieben habe.

    Also nur einige psuedocode:

    var animation = new MyAnimationLibrary(function() { $(selector).animate( ... ) });
animation.onStart.push(function() {
    alert('animation starts');
});
//then later in the code:
animation.start();

    Dann machen Sie doch einfach den oben genannten Aufruf der Funktionen in der array-animation.onStart und auslösen der animation.

    InformationsquelleAutor David Sherret
Schreibe einen Kommentar