jQuery: wie fade zwischen den Klassen?

Ich muss in der Lage sein, zu verblassen zwischen den Klassen und nahtlos alle und alle Stile, die angewendet wird, um das element und seine Kinder. Wie kann dies erreicht werden unter Verwendung von jQuery? Ich weiß, wie das hinzufügen/entfernen von Klassen, aber das ist nicht das gleiche wie einen schönen übergang zwischen zwei drastisch verschiedenen Farben.

  • Mögliche Duplikate von: stackoverflow.com/questions/2176413
  • Dazu können Sie mit jQuery UI-Transition-plugin (IIRC), aber ich bin ungern zu empfehlen, jQuery-UI, aber das ist persönliche Präferenz.
  • Hat es zu tun mit jQuery? Die meisten aktuellen Browsern (außer natürlich im IE, mit Ausnahme eventuell bei der nächsten version, IE10), Unterstützung für CSS-übergänge zu einem gewissen Grad, wenn Sie Ihre eigenen style-Regeln. Oder ist das das problem?
InformationsquelleAutor Andrew | 2012-01-20
  1. 8

    jQuery-UI hat eine toggleClass-Funktion, die ein argument Dauer:

    http://jqueryui.com/demos/toggleClass/

    Zum Beispiel, Tue ich dies auf einer meiner Seiten (fade in/out die light Klasse und fade/in aus der dark Klasse):

    $('body').toggleClass('light', 250).toggleClass('dark', 250);
    • das sieht extrem vielversprechend aus. werde ich haben, check it out. danke!
    • da Ihre Antwort technisch erreicht, was ich fragte, ich gebe dir den Kredit, aber meine Erfahrung mit dem jQuery-UI-Klasse Animationen war schrecklich. Ich landete hacken zusammen etwas beteiligt, dass fading in/out Ebenen, die positioniert waren, die hinter den Inhalten.
    • In diesem Fall, könnte es ein effektiver Weg, um die Struktur des Layouts. Manchmal habe ich Durchlaufen meine Pläne ein halbes Dutzend mal, bevor es beginnt funktionell gesund. 🙂
    • Ich Frage mich, warum diese nicht dokumentiert ist in der jQuery-API - api.jquery.com/toggleclass
    • denn wie die Antwort sagt, es ist jQuery-UI, kein jQuery-core.
    InformationsquelleAutor Matt
  2. 3

    Ist es das, was du versuchst zu erreichen? Hier ist das jsFiddle

    HTML:

    <input type="button" id="toggle" value="toggle" />
<br />
<div id="classContainer">

    <div id = "class1">

    </div>
    <div id = "class2">
    </div>
</div>

    jQuery:

    $("#toggle").click(function (){
    if ($("#class1").is(":visible")) {
        $("#class1").fadeOut();
        $("#class2").fadeIn();
    }
    else {
        $("#class1").fadeIn();
        $("#class2").fadeOut();
    }
 });

    CSS:

    #classContainer
{
    position: relative;
}

#class1, #class2
{
    height: 100px;
    width: 100px;
    position: absolute;
    top: 0;
    left: 0;
}

#class1
{
    background-color: red;
    display: none;
}

#class2
{
    background-color: blue;
}
    • dies ist im Grunde das, was ich am Ende machen
    InformationsquelleAutor RandomWebGuy
  3. 0

    Überprüfen Sie die Farbe-plugin für jQuery: https://github.com/jquery/jquery-color

    InformationsquelleAutor Tom
  4. 0

    Versuchen fadeIn. 

    $(".myClass").fadeIn("slow");

    http://api.jquery.com/fadeIn/

    Zwar je nach Komplexität können Sie brauchen, jQuery UI, wie andere erwähnt haben.

    • Diese verblassen in den Elementen, nicht die Klasse auf die Elemente angewandt.
    • Stimmt, diese Funktionalität sollte in jQuery core imo.
    InformationsquelleAutor Ian Hoar
Schreibe einen Kommentar