first - jquery parent tr

Fade el color de fondo de una etiqueta span con JQuery

Question

Estoy tratando de desvanecer el color de fondo de una etiqueta span utilizando JQuery para enfatizar cuando ha ocurrido un cambio. Estaba pensando que el código sería algo como lo siguiente dentro del controlador de clic, pero parece que no puedo hacerlo funcionar. ¿Me puedes mostrar dónde me equivoqué? Gracias Russ.

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

Eso es mejor, pero ahora se desvanece tanto el color de fondo de la etiqueta span como el valor de texto de la etiqueta span también. Estoy intentando simplemente desvanecer el color de fondo y dejar el texto visible. ¿Se puede hacer eso?

Answer 1

¡OH, no me di cuenta de que querías desvanecer el color! OK, entonces necesitas revisar el complemento de color jQuery:

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

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

Y aquí hay otra sección útil del sitio de documentos de jQuery:

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

Nunca he hecho esto, así que no intentaré darte el código, pero imagino que el complemento de color te dará la funcionalidad que necesitas.

Answer 2

Así es como lo arreglé para mi 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 3

El negocio más nuevo de jQuery UI le permite realizar transformaciones de color de fondo en la mayoría de los objetos. Vea aquí: http://jqueryui.com/demos/animate/

En cuanto al tipo que pregunta por hacer un fondo transparente en el rollo para revelar una imagen, ¿no sería más sencillo construirlo como un rollo de imagen jQuery normal como los que usa la gente para cambiar las imágenes de navegación?

Answer 4

Esto se puede hacer con jQuery (o cualquier lib) y un simple truco de 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>

Entonces, todo lo que necesitas hacer es:

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

¡Pan comido! Vea esto en acción: http://jsfiddle.net/matthewbj/jcSYp/

Answer 5

No quería usar un plugin. Así que para desvanecer un fondo dentro y fuera, incluí esto para la clase div que tiene su fondo desvanecido.

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

El jQuery que está en un clic de botón.

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

Esto coloreará el fondo de color gris claro y luego volverá al color original. Espero que esto contribuya.

Answer 6

Otra solución sin jQuery UI https://.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);
}

Demostración: http://jsfiddle.net/5NB3s/3/

Answer 7

Prueba esto

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

Answer 8

Puede ser tarde para responder, pero una solución directa a su respuesta.

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

Sencillo. No hay necesidad de jqueryUI plugin, herramientas de terceros y todo.

Answer 9

Querrás usar esta sintaxis:

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

Answer 10

Se puede hacer con el http://plugins.jquery.com/project/color . Entonces harías algo como

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

Answer 11

Si usar jQ puro para desvanecer un fondo no funciona sin un complemento, hay una forma inteligente (aunque no progresivamente mejorada) de hacer esto con CSS3.

Esta función aplicará el atributo "transición" a un elemento dado a través de CSS. A continuación, se le otorga un color de fondo al elemento en el que CSS se desvanece.

En caso de que desee que esto sea como una onda ("¡mire aquí!"), Después de un retraso de medio segundo, una función se pone en cola para hacer que el elemento vuelva a blanco.

Básicamente, jQ solo hace que el elemento parpadee en un color y luego vuelva a blanco. CSS3 se encarga de la decoloración.

//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 12

por eso llamas a fadeOut en la etiqueta span. para obtener la animación de fondo se debe utilizar:

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

como apunta por mishac. Otra forma podría ser algo como esto:

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

el código anterior se desvanecerá al 50% de la etiqueta de intervalo completo, luego cambiará el fondo y fadeIn. no es lo que estaba buscando, pero crea una animación de decet sin depender de otros complementos de jQuery;)