Fundido de color de fondo de una etiqueta de tramo con JQuery

Question

Estoy tratando de difuminar el color de fondo de una etiqueta de tramo usando JQuery para enfatizar cuando ha ocurrido un cambio. Estaba pensando que el código sería algo así como lo siguiente dentro del manejador de clics, pero parece que no puedo hacerlo funcionar. ¿Puedes mostrarme 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 y el valor de texto de la etiqueta span también. Estoy tratando de desvanecer el color de fondo y dejar el texto visible. ¿Se puede hacer eso?

Answer 1

¡OH, no me di cuenta de que quería desvanecer 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í hay otra sección útil del sitio docs jQuery:

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

I Nunca he hecho esto, así que no intentaré darle el código, pero imagino que el plugin de color le dará la funcionalidad que necesitar.

Answer 2

Usted querrá utilizar esta sintaxis:

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

Answer 3

Se puede hacer con el color animation plugin. Entonces haría algo como

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

Answer 4

es por eso que llama a fadeOut en la etiqueta span. para obtener una animación de fundido de fondo, debe usar:

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

como 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 al 50% de toda la etiqueta span, a continuación, cambia el fondo y fadeIn. no es lo que estabas buscando, sino que crea una animación decet sin depender de otros plugins jQuery;)

Answer 5

probar este

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

Answer 6

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 interruptor ¿Imágenes de navegación?

Answer 7

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

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

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

Esencialmente, jQ solo parpadea el elemento en un color, luego vuelve al blanco. CSS3 se ocupa 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 8

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

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

Simple. No es necesario el complemento jqueryUI, herramientas de terceros y todo.

Answer 9

Esto se puede hacer con jQuery (o cualquier lib) & 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> 

Entonces, todo lo que tiene que hacer es:

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

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

Answer 10

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 11

que no quería utilizar un complemento Así que para atenuar un fondo de entrada y salida, 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 se encuentra en un botón de clic

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

Este será el color del fondo gris luz y luego se desvanecen al color orig espero que esto contribuye

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); 
} 

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