jQuery Animation: Stop Animieren, Sobald die Maus Aus

Ich versuche, eine div an slide-out und in auf hover d.h. Maus, betreten und verlassen, beziehungsweise. Wenn ich allerdings schwebte in die und aus mehrmals, die div gehalten Schiebetür und zurück, also die Anzahl der Male habe ich den hover. Bitte Lesen Sie diese jsFiddle-Beispiel.

Da hast du wohl schon erraten, ich bin der Hoffnung, um die div stoppen (d.h. glitten in), sobald sich die Maus außerhalb des Elements unabhängig davon, wie viele Male habe ich moused über es. Ich denke, es ist etwas fehlt in meinem Verständnis über jQuery animation.

$("#state-slider").hover(function() {
  $(this).animate({
    left: '0'
  }, 500);
}, function() {
  $(this).animate({ left: "-270" }, 500);
});

Danke.

InformationsquelleAutor moey | 2012-01-08

  1. 17

    Müssen Sie die jQuery .stop() - Funktion. Legen Sie es in Ihren Kommando-Kette, bevor Sie beginnen, eine neue animation zu unterbrechen, werden alle Laufenden Animationen.

    $('#state-slider').hover(function() {
    $(this).stop().animate({ left: 0 }, 500);
}, function() {
    $(this).stop().animate({ left: -270 }, 500);
});

    Arbeiten jsFiddle =)

    Das klappt perfekt. Danke!!! Wissen Sie, warum müssen wir auch .stop() bei der Maus eingeben? Ich weiß, wir müssen es haben, weil es sonst ein "springen" wie in @3nigma Antwort, aber ich bin nicht sicher, dass die Argumentation hinter es.
    Der Grund für die Verwendung .stop() auf die Maus-Eingabe und Maus-verlassen, wird deutlich, wenn Sie Ihre Maus über das div, verschieben Sie es Weg und dann schnell wieder zurück. Was der Benutzer erwartet, dass das div "turn around", d.h. halt, was es tut und tun, die neue Sache statt. Das ist genau das, was .stop() tut.
    +1 für die Klarstellung!

    InformationsquelleAutor Tomas Aschan

  2. 1
    $("#state-slider").hover(function() {
  $(this).animate({
    left: '0'
  }, 500);
}, function() {
  $(this).stop(true,true).animate({ left: "-270" }, 500);
});

    DEMO

    http://api.jquery.com/stop/

    Danke, @3nigma. Beachten Sie jedoch, dass es einen "Sprung", wenn Sie mit der Maus geben Sie die div und sofort raus. Ich denke, wir müssen auch .stop() bei der Maus eingeben?
    Ah, ich hab es jetzt: um zu verhindern, dass der "Sprung" verwenden stop(true) statt stop(true, true).

    InformationsquelleAutor Rafay

  3. 0

    es ist ein Beispiel

    http://jsfiddle.net/amkrtchyan/TQz5U/1/

    - und jquery-code

    $(function() {
    $("#state-slider").hover(function() {
        $(this).stop(true,true).animate({
            left: '0'
        }, 500);
    }, function() {
        $(this).stop(true,true).animate({ left: "-270" }, 500);
    });
});

    InformationsquelleAutor Aram Mkrtchyan

Schreibe einen Kommentar