Fade il background-color di un tag span con jQuery

Question

Sto cercando di sfumare il colore di sfondo di un tag span utilizzando jQuery per enfatizzare quando un cambiamento si è verificato. Stavo pensando il codice sarebbe someting simile al seguente all'interno del gestore click, ma io non riesco a farlo funzionare. Puoi mostrarmi dove ho sbagliato? Grazie Russ.

$("span").fadeOut("slow").css("background-color").val("FFFF99");

---

Così va meglio, ma ora si affievolisce sia il background-color del tag span e il valore del testo del tag span troppo. Sto cercando di svanire solo il background-color e lasciare il testo visibile. che si può fare?

Answer 1

OH, non mi rendevo conto che si voleva a sbiadire il colore! OK, quindi è necessario controllare il plugin jQuery colore:

http://plugins.jquery.com/project/color

https://github.com/jquery/jquery-color/

Ed ecco un'altra sezione utile del sito docs jQuery:

http://docs.jquery.com/Release:jQuery_1.2 / Effetti # Color_Animations

non ho mai fatto questo in modo da non cercherà di darvi il codice, ma immagino il plugin colore vi darà la funzionalità necessaria.

Answer 2

Può essere fatto con la animazione plug . Farebbe quindi fare qualcosa di simile

$('span').animate({'backgroundColor' : '#ffff99'});

Answer 3

Se si utilizza jQ puro per sfumare uno sfondo non funziona senza un plug-in, c'è una (anche se non progressivamente rafforzata) modo intelligente per fare questo con CSS3.

Questa funzione si applica l'attributo "transizione" per un dato elemento tramite CSS Successivamente, l'elemento viene assegnato un colore di sfondo, che sfuma in CSS.

Nel caso in cui si desidera che questo sia come un'onda ( "guarda qui!"), Dopo un ritardo di mezzo secondo, una funzione è in coda per girare l'elemento di nuovo al bianco.

In sostanza jQ appena lampeggia l'elemento a un colore, poi di nuovo al bianco. CSS3 si prende cura di dissolvenza.

//reusable function to make fading colored hints
function fadeHint(divId,color) {
    switch(color) {
        case "green":
        color = "#17A255";
        break;

        case "blue":
        color = "#1DA4ED";
        break;

        default: //if "grey" or some misspelled name (error safe).
        color = "#ACACAC";
        break;
    }

    //(This example comes from a project which used three main site colors: 
    //Green, Blue, and Grey)

    $(divId).css("-webkit-transition","all 0.6s ease")
    .css("backgroundColor","white")
    .css("-moz-transition","all 0.6s ease")
    .css("-o-transition","all 0.6s ease")
    .css("-ms-transition","all 0.6s ease")
    /* Avoiding having to use a jQ plugin. */

    .css("backgroundColor",color).delay(200).queue(function() {
        $(this).css("backgroundColor","white"); 
        $(this).dequeue(); //Prevents box from holding color with no fadeOut on second click.
    }); 
    //three distinct colors of green, grey, and blue will be set here.
}

Answer 4

Questo può essere fatto con jQuery (o qualsiasi lib) e un semplice trucco CSS:

#wrapping-div {
 position:relative;
 z-index:1;
}
#fadeout-div {
 height:100%;
 width:100%;
 background-color: #ffd700;
 position:absolute;
 top:0;
 left:0;
 z-index:-1
}

HTML:

<div id="wrapping-div">
  <p>This is some text</p>
  <p>This is some text</p>
  <p>This is some text</p>
  <div id="fadeout-div"></div>
</div>

Poi, tutto quello che dovete fare è:

$("#fadeout-div").fadeOut(1100);

Easy Peasy! Vedere questo in azione: http://jsfiddle.net/matthewbj/jcSYp/

Answer 5

Prova questo

    $(this).animate({backgroundColor:"green"},  100);
    $(this).animate({backgroundColor:"white" },  1000);

Answer 6

Può essere tardi per rispondere, ma una soluzione direttamente alla tua risposta.

 $('span').css('background-color','#<from color>').animate({backgroundColor: '#<to color>'},{duration:4000});

Semplice. Non c'è bisogno di plug-in jQueryUI, strumenti 3rd party e tutti.

Answer 7

Non ho voglia di utilizzare un plugin Quindi, per sfumare un fondo dentro e fuori ho incluso questo per il thats classe div di avere il suo sfondo sbiadito

.div-to-fade {
    -webkit-transition:background 1s;
    -moz-transition:background 1s;
    -o-transition:background 1s;
    transition:background 1s
}

la jquery che è in un pulsante di scatto

$('.div-to-fade').css('background', 'rgb(70, 70, 70)');
setTimeout(function(){$('.div-to-fade').css('background', '')}, 1000);

Questa colorerà sfondo grigio chiaro e poi svanire di nuovo al colore orig Spero che questo contribuisca

Answer 8

è per questo che si chiama fadeOut sul tag span. per ottenere sfondo dissolvenza animazione si dovrebbe usare:

$('span').animate({'backgroundColor' : '#ffff99'});

come sottolineato dal mishac. un altro modo potrebbe essere qualcosa di simile:

$("span").fadeTo(0.5,"slow", function () {
  $(this).css("background-color", "#FFFF99");
  $(this).fadeIn("slow");
});

il codice qui sopra FadeOut al 50% dell'intero tag span, poi cambia sfondo e fadeIn. non è quello che stavi cercando, ma crea un'animazione decet senza dipendere da altri plugin jQuery;)

Answer 9

L'ultimo affari jQuery UI ti permette di fare background-color trasforma sulla maggior parte degli oggetti. Vedi qui: http://jqueryui.com/demos/animate/

Per quanto riguarda il ragazzo che chiede di fare uno sfondo trasparente sul roll-over per rivelare un'immagine non sarebbe più semplice per costruirlo come una normale immagine jQuery roll-over come quelli la gente usa per alternare le immagini nav?

Answer 10

Ti consigliamo di utilizzare questa sintassi:

$("span").fadeOut("slow").css("background-color", "#FFFF99");

Answer 11

Ecco come ho riparato per la mia lista con un hover:

CSS:

ul {background-color:#f3f3f3;}
li:hover {background-color: #e7e7e7}

jQuery:

$(document).ready(function () {
    $('li').on('touchstart', function () { $(this).css('background-color', ''); });
    $('li').on('touchend', function () { $(this).css('background-color', 'inherit'); });
});

Answer 12

Un'altra soluzione senza https://stackoverflow.com/a/22590958/781695

//Color row background in HSL space (easier to manipulate fading)
$('span').css('backgroundColor','hsl(0,100%,50%');

var d = 1000;
for(var i=50; i<=100; i=i+0.1){ //i represents the lightness
    d  += 10;
    (function(ii,dd){
        setTimeout(function(){
            $('span').css('backgroundColor','hsl(0,100%,'+ii+'%)'); 
        }, dd);    
    })(i,d);
}

Demo: http://jsfiddle.net/5NB3s/3/