Fade in / fade out colore di sfondo di un elemento HTML con Javascript (jQuery o)

Ho una tabella le cui righe deve essere evidenziata & poi cancellato. Sto usando contestuale classi per il colore delle righe della tabella (non è un requisito necessario). La parte javascript è dato seguito. Come posso animare cioè fadeIn /fadeOut la colorazione delle righe utilizzando javascript /jQuery /Bootstrap. Il codice seguente aggiunge un & rimuove il colore.

$('tr').eq(1).addClass('success');

setTimeout(function(){
    $('tr').eq(1).removeClass('success');
},2000);

http://jsfiddle.net/5NB3s/

P. S. Tentando di evitare il jQuery UI percorso qui Come si fa il fade in/out un colore di sfondo con jquery?

Sono rows “evidenziato” animato sul load,hover?
No

InformationsquelleAutor user | 2014-03-22

5 Replies
  1. 11

    Ecco cosa ho cucinato. Funziona bene, senza bisogno di alcun UI library. Anche jQuery può essere eliminato, se necessario.

    //Color row background in HSL space (easier to manipulate fading)
    $('tr').eq(1).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(){
                $('tr').eq(1).css('backgroundColor','hsl(0,100%,'+ii+'%)'); 
            }, dd);    
        })(i,d);
    }

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

    • SetTimeout aumenta la leggerezza dal 50% al 100%, in sostanza che lo sfondo bianco (si può scegliere qualsiasi valore a seconda del colore).
    • SetTimeout è avvolto in una funzione anonima per funzionare correttamente in un ciclo ( ragione )
    non la proprietà css “background-color”?
    jQuery capisce e restituisce il valore corretto per entrambi .css( “background-color” ) e .css( “backgroundColor” ) : Fonte

    InformationsquelleAutor user

  2. 4

    Una strada potrebbe essere :

    JS :

    $('tr').eq(1).hide().addClass('success').fadeIn('slow');
    
    setTimeout(function(){
      $('tr').eq(1).fadeOut('slow',function(){ $(this).removeClass('success').show();});
    },2000);

    Bootply : http://www.bootply.com/123956


    AGGIORNAMENTO
    Secondo modo, molto meglio, ma… mi spiego :

    Bootply : http://www.bootply.com/123956 [ancora lo stesso url non preoccuparti]

    JS :

    $('tr').eq(1).animate({
      backgroundColor: "#dff0d8"
    }, 2000 );
    
    
    setTimeout(function(){
            $('tr').eq(1).animate({
              backgroundColor: "#ffffff"
            }, 2000 );
    },2000);

    È necessario utilizzare jQueryUI animare e il risultato è visivamente buono…

    +1 approccio interessante – ma provoca un fremito al termine della classe di rimozione (il fadeOut + spettacolo)
    Si prega di vedere me update
    Senza dubbio, jQuery UI è grande. Ho anche un link nella mia domanda che utilizza jQuery UI, che sto cercando di evitare. Non voglio aggiungere solo 1 effetto.
    Questo non è un JS esempio, jQuery
    Sì e quando si legge l’etichetta, È possibile pronto jQuery, no???

    InformationsquelleAutor Pimento Web

  3. 2

    Ho avuto lo stesso problema e non riuscivo a trovare un modo semplice per fare altro rispetto alla programmazione. Un altro modo per ottenere fadding BG colori utilizza le proprietà CSS per ogni riga quando si passa il mouse.

    #RowID{
    background-color: #ececec;
    background-color: rgba(236, 236, 236, 0.901961);
    -moz-transition: background-color 1s cubic-bezier(1,1,1,1);
    -moz-transition-delay: 0.5s;
    -ms-transition: background-color 1s cubic-bezier(1,1,1,1);
    -ms-transition-delay: 0.5s;
    -o-transition: background-color 1s cubic-bezier(1,1,1,1);
    -o-transition-delay: 0.5s;
    -webkit-transition: background-color 1s cubic-bezier(1,1,1,1);
    -webkit-transition-delay: 0.5s;
    transition: background-color 1s cubic-bezier(1,1,1,1);
    transition-delay: 0s;
    }
    
    #RowID:hover {
        background-color: rgb(206, 128, 128);
    } 

    Inoltre è sempre possibile impostare l’intervallo di tempo desiderato per il BG per modificare l’impostazione della transizione-proprietà ritardo.

    JSFiddle

    Ho aggiunto un violino con il demo. La mia domanda originale era di trigger a livello di programmazione con JS, che non può essere fatto in questo caso. Ancora una bella alternativa, +1.

    InformationsquelleAutor Matias

  4. 0

    Il 105 del rgb(255,255,105) è come giallo per iniziare. 100 in setInterval chiamata è veloce come il giallo sfuma al bianco.

    <div id="x" style="background-color:rgb(255,255,105)">hello world</div>
    <script type="text/javascript">
        var unBlue=105;
        var gEvent=setInterval("toWhite();", 100);
        function toWhite(){
            if(unBlue<255) document.getElementById("x").style.backgroundColor="rgb(255,255,"+unBlue+")";
            else clearInterval(gEvent)
            unBlue+=10;
        }
    </script>

    InformationsquelleAutor gordon

  5. 0

    Simile alla risposta dell’utente sopra, tranne che per gestire la dissolvenza, cambio opaco valore di fade in e fade out. Anche io uso il tag id per diverse celle della tabella, in modo che possiamo utilizzare diversi colori. Prima è necessario tag cella con un attributo id:

    <td id="cellToShade">.01</td>

    Poi mettere il codice javascript nella riga seguente per impostare il timeout e modificare l’opaco valore:

    <script>
    
    var d = 500;
    var opaqueness=.05;
    for(var i=0; i<=600; i=i+1){ 
        d  += 10;
        opaqueness += .0001;
        (function(i,d, opaqueness){
            setTimeout(function(){
                document.getElementById("cellToShade").style.background = "rgba(255, 0, 0, "+ opaqueness +")";
            }, d);    
        })(i,d, opaqueness);
    
    }
    
    </script>

    Si potrebbe desiderare di giocare con l’opacità variabile, i, e d per ottenere l’effetto di temporizzazione che si desidera.

    InformationsquelleAutor Odysseus Ithaca

Lascia un commento