Esta es la fila de mi tabla, mi requisito es mostrar la fila por primera vez en color amarillo después de 4 segundos de que el color se desvanezca. cómo es posible.

$('#invoice').prepend('<tr><td>Invoice</td><td>analysing</td><td>analysing</td></tr>');
2
Manu Padmanabhan 28 jun. 2016 a las 12:37

4 respuestas

La mejor respuesta

Tengo tres soluciones para usted: Javascript puro , jQuery Y CSS

Solución Javascript Pura:

Esto crea un nuevo tr y lo agrega a la tabla con el innerHTML establecido en las etiquetas td. Casi lo mismo que su jQuery que se agrega a la tabla, pero un poco diferente. He hecho esto para poder dirigirme a ese tr específico que se acaba de crear para que se ejecute el setTimeout.

function demo(){
var table = document.getElementById('invoice');
var tr = document.createElement('tr');
      table.appendChild(tr);
      tr.innerHTML='<td>Invoice</td><td>analysing</td><td>analysing</td>';
  // Opacity change
  setTimeout(function(){ tr.style.opacity="0.5"}, 4000);
  //Background only
      //setTimeout(function(){ tr.style.background="rgba(255,255,0,.2)"}, 4000);
}
table tr{background:yellow;opacity:1;}
<button id="create" onclick="demo()">Add</button>
<table id="invoice">
<tr><td>Invoice</td><td>analysing</td><td>analysing</td></tr>
</table>

Actualización, he comentado el cambio de fondo y lo reemplacé con Opacidad ya que también desvanecerá el contenido. Si solo desea que cambie el fondo, elimine la línea de opacidad y descomente la línea de fondo.


Solución jQuery:

$(document).ready(function () {
  $( "#create" ).click(function() {
  $('#invoice').prepend('<tr><td>Invoice</td><td>analysing</td><td>analysing</td></tr>');
  setTimeout(function () {
$('tr').css('transition', 'opacity .5s ease-in');
$('tr').css('opacity', '0.5');
}, 4000);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="create">Add</button>
<table id="invoice">
</table>

Un problema con la solución jQuery anterior: si crea múltiples td, el temporizador pasará del primero creado, por lo que es posible que los elementos cambien en menos de 4 segundos


Solución CSS:

Sé que CSS no está etiquetado en esta pregunta, pero creo que cuantas más soluciones, mejor.

He agregado soporte para navegadores para que no tenga ningún problema, puede probarlos y eliminar los que no desea.

// Jquery for Demo purposes of creating dynamic elements.
$(document).ready(function () {
  $( "#create" ).click(function() {
  $('#invoice').prepend('<tr><td>Invoice</td><td>analysing</td><td>analysing</td></tr>');
});
});
#invoice tr {
  background:yellow; 
    -webkit-animation: OpFade 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: OpFade 1s; /* Firefox < 16 */
        -ms-animation: OpFade 1s; /* Internet Explorer */
         -o-animation: OpFade 1s; /* Opera < 12.1 */
            animation: OpFade 1s;
            animation-delay: 4s;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
@keyframes OpFade {
    from { opacity: 1;}
    to   { opacity: 0.5;}
}

/* Firefox < 16 */
@-moz-keyframes OpFade {
    from { opacity: 1; }
    to   { opacity: 0.5; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes OpFade {
    from { opacity: 1; }
    to   { opacity: 0.5; }
}

/* Internet Explorer */
@-ms-keyframes OpFade {
    from { opacity: 1; }
    to   { opacity: 0.5; }
}

/* Opera < 12.1 */
@-o-keyframes OpFade {
    from { opacity: 1; }
    to   { opacity: 0.5; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="create">Add</button>
<table id="invoice">
<tr><td>Invoice</td><td>analysing</td><td>analysing</td></tr>
</table>

Si tiene alguna pregunta sobre el código fuente anterior, no dude en comentar a continuación y me pondré en contacto con usted lo antes posible.

Espero que esto ayude, ¡feliz codificación!

1
NewToJS 28 jun. 2016 a las 11:24

Inicialmente, las filas de la tabla están en color amarillo en la carga de la página y desea que el tr se desvanezca lentamente después de 4 segundos con el color de fondo como amarillo desvanecido significa que puede intentar hacerlo de esta manera ...

Css:

<style type="text/css">
  tr {
    background:yellow;
  }
</style>

Html:

<table>
<tr><td>Invoice</td><td>analysing</td><td>analysing</td></tr>
</table>

Jquery:

$(document).ready(function () {
setTimeout(function () {
  $('tr').css('transition', 'background .5s ease-in'); //will make things fade in slowly
  $('tr').css('background', '#ffffbb'); //faded color
}, 4000);
});
0
Lokesh_Ram 28 jun. 2016 a las 10:20

$ ("# factura tr"). css ('color', 'amarillo'). delay (4000) .css ('color', 'fade');

0
tom 28 jun. 2016 a las 09:45

Violín de trabajo si entendí tu pregunta correctamente.

$(document).ready(function() {
  setTimeout(function(){
jQuery("tr").fadeOut("slow");
}, 4000);
});

https://jsfiddle.net/oemhLn7n/2/

0
Sandro T 28 jun. 2016 a las 09:52