jQuery: comment faire un fondu entre les classes?

J'ai besoin d'être en mesure de fondu entre les classes et facilement la transition de tout et de tous les styles appliqués à l'élément et de ses enfants. Comment cela peut-il être fait à l'aide de jQuery? Je sais comment ajouter/supprimer des classes, mais qui n'est pas le même comme une belle transition entre deux radicalement différentes couleurs.

Double Possible: stackoverflow.com/questions/2176413
Vous pouvez le faire avec jQuery UI Transition du plugin (IIRC), mais je suis loin d'être disposé à recommander jQuery UI, mais c'est une préférence personnelle.
A-t-elle à faire avec jQuery? La plupart des navigateurs récents (à l'exception, bien sûr, c'est à dire, sauf peut-être la prochaine version, IE10) soutenir les transitions CSS à un certain degré, si vous utilisez leurs propres règles de style. Ou est le problème?

OriginalL'auteur Andrew | 2012-01-20

  1. 8

    jQuery UI a un toggleClass fonction qui a un argument pour durée:

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

    Par exemple, je le fais sur un de mes sites (fade in/out de l' light classe et fade/dans le dark classe):

    $('body').toggleClass('light', 250).toggleClass('dark', 250);
    qui semble très prometteur. je vais avoir à le vérifier. merci!
    depuis votre réponse techniquement réalise ce que je demande, je vais vous donner le crédit, mais mon expérience avec le jQuery UI classe des animations a été horrible. J'ai fini le piratage quelque chose ensemble qui a impliqué diffusant les couches qui ont placé derrière le contenu.
    Dans ce cas, il pourrait y avoir un moyen plus efficace de la structure de votre mise en page. Parfois, j'ai l'itération mes plans une demi-douzaine de fois avant qu'il ne commence à être fonctionnellement sain d'esprit. 🙂
    Je me demande pourquoi ce n'est pas documentée dans le jQuery API api.jquery.com/toggleclass
    parce que la réponse dit, c'est jQuery UI, pas de base jQuery.

    OriginalL'auteur Matt

  2. 3

    Est-ce que vous voulez accomplir? Voici le 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;
}
    c'est en gros ce que j'ai fait

    OriginalL'auteur RandomWebGuy

  3. 0

    Vérifiez la couleur plugin pour jQuery: https://github.com/jquery/jquery-color

    OriginalL'auteur Tom

  4. 0

    Essayer fadeIn. 

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

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

    Bien en fonction de la complexité, vous pouvez avoir besoin de jQuery UI comme d'autres l'ont mentionné.

    Cela va s'estomper dans les éléments, et non pas la classe appliquée aux éléments.
    Vrai, cette fonctionnalité devrait être en jQuery de base de l'omi.

    OriginalL'auteur Ian Hoar