[Jquery] Alla pressione di un bottone, cambiarlo e poi ritornare allo stato originale

[robynosse]

Ciao a tutti,

sto cercando di effettuare una semplice operazione alla preassione di un tasto, ma non riesco a risolvere:

codice html:

<span id="bottoneCopia" class="label label-success">Copia</span>

Alla pressione del tasto Copia vorrei che il testo cambiasse immediatamente ad un altro colore(il colore è assegnato alle classi 'label-success' e 'label-warning') e il contenuto del testo cambiasse, fin qui nessun problema:

   $("#bottoneCopia").on("click", function () {
        $(this).removeClass("label-success").addClass("label-warning")
                .text("Copiato in memoria");
    });

Adesso però vorrei eseguire altri metodi (funzioni) dopo .text("Copiato in memoria") con un ritardo di un secondo e ritornare allo stadio iniziale.
Ho provato ad aggiungere .delay(1000).text("Fatto");
il cambio è però immediato, ovvero passa da 'Copia' a 'Fatto' e 'Copiato in memoria' non si vede, come mai?
Come posso ritardare il resto delle funzioni?

Grazie,
Roberto

[robynosse]

Ho risolto così:

    $("#bottoneCopia").on("click", function () {
        $(this).stop().removeClass("label-success").addClass("label-warning")
                .text("Copiato in memoria")
                .delay(1000).queue(function() { 
        $(this).stop().text("Copia");
        });
    });

Adesso però vorrei che facesse una transizione tra la classe attuale "label-warning" e "label-success"

[robynosse]

Ecco la mia soluzione:

    $("#bottoneCopia").on("click", function () {
        $(this).stop().removeClass("label-success").addClass("label-warning")
                .text("Copiato in memoria")
                .delay(1000).queue(function () {
            $(this).stop()
                    .fadeOut(function () {
                        $(this).removeClass("label-warning").addClass("label-success").fadeIn(100).text("Copia");
                    });
        });
    });

Se qualcuno conosce un modo migliore, me lo dica, grazie!