jQuery mouseover mouseout Deckkraft

    function hoverOpacity() {
    $('#fruit').mouseover(function() {
        $(this).animate({opacity: 0.5}, 1500);
      });
    $('#fruit').mouseout(function() {
        $(this).animate({opacity: 1}, 1500);
      });
}

Dies ist meine Funktion, die animiert div#fruit, und es funktioniert.

Das problem ist Folgendes; Wenn Sie mouseout vor der mousein animation beendet ist, muss die animation fertig ist, bevor die mouseout. (hoffe das macht Sinn)

Dies ist in der Regel nicht spürbar, aber mit einer langen Dauer, es ist spürbar.

Anstelle der Fertigstellung der animation, ich will die animation zu stoppen und umzukehren, um den ursprünglichen Zustand.

InformationsquelleAutor a-second-mix | 2011-05-18
  1. 6

    Du suchst die stop Funktion, eventuell gefolgt von show (oder hide oder css ist, hängt davon ab, in welchem Zustand Sie möchten opacity zu enden).

    function hoverOpacity() {
    $('#fruit').mouseover(function() {
        $(this).stop(true).animate({opacity: 0.5}, 1500);
      });
    $('#fruit').mouseout(function() {
        $(this).stop(true).animate({opacity: 1}, 1500);
      });
}

    Den true sagt der animation zu springen, um das Ende. Wenn dies die einzige animation, die auf das element, es sollte in Ordnung sein; ansonsten, wie ich schon sagte, kann man sich bei css explizit die gewünschte Deckkraft.

    Getrennt, obwohl, könnte man auf die Verwendung mouseenter und mouseleave eher als mouseover und mouseout aus zwei Gründen: 1. mouseover wiederholt die Bewegung der Maus über das element, und 2. Beide mouseover und mouseout Blase, und so, wenn Sie Ihre "Früchte" - element child-Elemente, werden Sie Ereignisse empfangen, die von Ihnen als gut, was tendenziell zu einer Destabilisierung dieser Art von animation.

    • Ja, ich war auf der Suche für den .Stopp-Funktion, danke 🙂
    • Siehe auch die Anmerkung zu möglicherweise mit verschiedenen Veranstaltungen für diese.
    InformationsquelleAutor T.J. Crowder
  2. 2

    Müssen Sie zum hinzufügen eines Anrufs zu .stop() bevor Sie animieren zum löschen der aktuellen und alle in der Warteschlange Animationen:

    function hoverOpacity() {
    $('#fruit').mouseover(function() {
        $(this).stop(true).animate({opacity: 0.5}, 1500);
      });
    $('#fruit').mouseout(function() {
        $(this).stop(true).animate({opacity: 1}, 1500);
      });
}
    InformationsquelleAutor Rory McCrossan
  3. 1

    Versuchen Sie dies:

    function hoverOpacity() {
    $('#fruit').mouseover(function() {
        $(this).stop(true, true).animate({opacity: 0.5}, 1500);
      });
    $('#fruit').mouseout(function() {
        $(this).stop(true, true).animate({opacity: 1}, 1500);
      });
}

    Dieser sollte die animation anzuhalten, deaktivieren Sie die Warteschlange (first arg) und springen Sie an das Ende (zweite arg), die Sie ändern können /wollen, um Chaos mit den Argumenten als angemessen.

    InformationsquelleAutor Ben Everard
  4. 0

    versuchen, diese aswell:

    function hoverOpacity() {
    $('#fruit').hover(function() {
        $(this).animate({opacity: 0.5}, 1500);
    }, function() {
        $(this).animate({opacity: 1}, 1500);
    });
}
    InformationsquelleAutor metaforce
Schreibe einen Kommentar