Desbotar a cor de fundo de uma tag span com JQuery

Question

Eu estou tentando desbotar a cor de fundo de uma tag span usando JQuery para enfatizar quando uma mudança ocorreu. Eu estava pensando o código seria someting como o seguinte dentro do manipulador de clique, mas eu não consigo fazê-lo funcionar. Você pode me mostrar onde eu errei? Graças Russ.

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

---

Assim é melhor, mas agora ele desaparece tanto o background-color da tag span e o valor de texto da tag span também. Eu estou tentando apenas desbotar a cor de fundo e deixar o texto visível. que pode ser feito?

Answer 1

Oh, eu não sabia que você queria desaparecer a cor! OK, então você precisa verificar o plugin jQuery cor:

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

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

E aqui está outra seção útil de local docs jQuery:

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

Eu nunca realmente fez isso por isso não vou tentar dar-lhe o código, mas eu imagino o plugin cor vai dar-lhe a funcionalidade que você precisa.

Answer 2

Isso pode ser feito com a cor animação plug-in . Você teria então fazer algo parecido

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

Answer 3

Se estiver usando puro jQ a desaparecer um fundo não funciona sem um plug-in, há uma maneira inteligente (embora não seja progressivamente melhorado) para fazer isso com CSS3.

Esta função irá aplicar o atributo de "transição" para um determinado elemento via CSS Em seguida, o elemento é dada uma cor de fundo que se desvanece CSS em.

No caso de pretender que este seja como uma onda ( "olha aqui!"), Após um atraso de meio segundo, uma função está na fila para ligar o elemento de volta para branco.

Essencialmente jQ apenas pisca o elemento para uma cor, em seguida, volta para o branco. CSS3 cuida do desbotamento.

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

Isto pode ser feito com jQuery (ou qualquer lib) e um hack CSS simples:

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

Então, tudo que você precisa fazer é:

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

Fácil Peasy! Ver isso em ação: http://jsfiddle.net/matthewbj/jcSYp/

Answer 5

Tente este

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

Answer 6

Pode ser tarde para resposta, mas uma solução diretamente para a sua resposta.

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

Simples. Não há necessidade de jQueryUI plugin, 3ª parte ferramentas e tudo.

Answer 7

Eu não quero usar um plugin Então a desvanecer-se um fundo dentro e fora i incluiu esta para os isso é classe div para ter o seu fundo desvanecido

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

o jquery que está em um clique de botão

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

Isto irá colorir o fundo luz de fundo cinza e em seguida, desaparecer com a cor orig Espero que isso contribui

Answer 8

é por isso que você chama fadeOut na tag span. para obter fundo de fade animação que você deve usar:

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

como apontado por mishac. de outra forma poderia ser algo como isto:

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

O código acima irá fadeout a 50% de toda a tag span, em seguida, muda de fundo e fadeIn. não é o que você estava procurando, mas cria uma animação decet sem depender de outros plugins jQuery;)

Answer 9

O mais novo negócio jQuery UI permite que você faça transforma background-color na maioria dos objetos. Veja aqui: http://jqueryui.com/demos/animate/

Como para o cara perguntando sobre como fazer um fundo transparente em roll-over para revelar uma imagem não seria mais simples para construí-lo como um roll-over imagem jQuery normal como as pessoas usam para mudar as imagens nav?

Answer 10

Você vai querer usar esta sintaxe:

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

Answer 11

Isto é como eu fixa-lo para a minha lista com um foco:

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

Outra solução sem 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);
}

Demonstração: http://jsfiddle.net/5NB3s/3/