Desvanecerse el color de fondo de una etiqueta span con jQuery

Question

Estoy tratando de desaparecer el color de fondo de una etiqueta span utilizando jQuery para enfatizar cuando un cambio ha ocurrido. Estaba pensando en el código sería el siguiente calle detrás como en el interior del controlador de clic, pero me parece que no puede conseguir que funcione. ¿Me puede mostrar que hice mal? 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 y el valor de texto de la etiqueta span también. Estoy tratando de desaparecer sólo el color de fondo y dejar el texto visible. Se puede hacer esto?

Answer 1

OH, no me di cuenta que quería desaparecer el color! Aceptar, por lo que necesita para comprobar el plugin de color jQuery:

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

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

Y aquí está otra sección útil del sitio docs jQuery:

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

realidad nunca he hecho esto por lo que no va a tratar de darle código, pero me imagino que el plug-in de color le dará la funcionalidad que necesita.

Answer 2

Se puede hacer con el animación plug-in . A continuación, haría algo como

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

Answer 3

Si se utiliza jQ pura a desaparecer un fondo no funciona sin un plugin, hay una forma inteligente (aunque no mejorado progresivamente) para hacer esto con CSS 3.

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

En caso de que quiera que esto sea como una ola ( "mira aquí!"), Después de un retraso de medio segundo, una función se pone en cola para girar el elemento de nuevo a blanco.

En esencia jQ solo parpadea el elemento a un color, luego de vuelta a blanco. CSS3 se encarga del desvanecimiento.

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

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

A continuación, todo lo que tiene que hacer es:

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

Peasy fácil! Ver esto en acción: http://jsfiddle.net/matthewbj/jcSYp/

Answer 5

Probar

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

Answer 6

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

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

simple. No hay necesidad de jQueryUI plugin, 3 ª Parte herramientas y todo.

Answer 7

No quería utilizar un plugin Así que a desvanecerse un fondo dentro y fuera i incluido este de la eso de clase div a tener su fondo se desvaneció

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

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 gris luz y luego se desvanecen al color orig Espero que esto contribuye

Answer 8

Es por eso que usted llama fadeOut en la etiqueta span. para obtener la animación de fundido de fondo que debe utilizar:

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

como se ha señalado por mishac. de otro modo podría ser algo como esto:

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

El código anterior Fadeout a 50% de toda la etiqueta span, a continuación, cambia de fondo y fadeIn. no es lo que estabas buscando, sino que crea una animación decet sin depender de otros plugins jQuery;)

Answer 9

El último negocio jQuery UI le permite hacer background-color se transforma en la mayoría de los objetos. Ver aquí: http://jqueryui.com/demos/animate/

En cuanto al chico preguntando acerca de hacer un fondo transparente sobre los dispositivos de revelar una imagen, ¿no sería más sencillo para construirlo como un vuelco de imagen normal jQuery como los que usa la gente para cambiar las imágenes de navegación?

Answer 10

Usted querrá utilizar esta sintaxis:

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

Answer 11

Así es como me fijo para mi lista con un elemento emergente:

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

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

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