Fade la couleur de fond d'une balise span avec JQuery

Question

Je suis en train de disparaître l'arrière-plan de couleur d'une balise span en utilisant JQuery pour souligner lorsqu'un changement a eu lieu. Je pensais le code serait someting comme ce qui suit dans le gestionnaire de clic, mais je ne peux pas sembler le faire fonctionner. Pouvez-vous me montrer où je suis allé mal? Merci Russ.

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

---

C'est mieux, mais maintenant il disparaît à la fois l'arrière-plan de couleur de l'étiquette de portée et la valeur de texte de la balise span aussi. Je suis en train de disparaître juste la couleur de fond et de laisser le texte visible. Cela peut-il être fait?

Answer 1

OH, je ne savais pas que vous vouliez effacer la couleur! OK, donc vous devez vérifier le plugin couleur jQuery:

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

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

Et voici une autre section utile du site docs jQuery:

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

Je ne l'ai jamais fait réellement ce je ne vais pas essayer de vous donner le code, mais je suppose que le plug-in de couleur vous donnera la fonctionnalité dont vous avez besoin.

Answer 2

Il peut être fait avec le . Vous souhaitez faire quelque chose comme

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

Answer 3

Si vous utilisez jQ pur pour faire disparaître un arrière-plan ne fonctionne pas sans plug-in, il y a une façon intelligente (bien que pas amélioré progressivement) de le faire avec CSS3.

Cette fonction appliquera l'attribut « transition » vers un élément donné via CSS Ensuite, l'élément est donné une couleur d'arrière-plan qui se fond dans CSS.

Si vous voulez que ce soit comme une vague ( « regardez ici! »), Après un délai d'une demi-seconde, une fonction est mis en attente pour transformer l'élément nouveau au blanc.

Pour l'essentiel jQ clignote juste l'élément sur une couleur, puis de nouveau au blanc. CSS3 prend soin du fading.

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

Cela peut être fait avec jQuery (ou tout lib) et un hack simple 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>

Alors, tout ce que vous devez faire est:

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

Easy Peasy! Voir en action: http://jsfiddle.net/matthewbj/jcSYp/

Answer 5

Essayer cette

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

Answer 6

Peut être en retard à répondre, mais une solution directement à votre réponse.

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

Simple

. Pas besoin de plug-in jQueryUI, 3e partie des outils et tous.

Answer 7

Je ne voulais pas utiliser un plugin Donc, pour estomper un fond et sortir i compris cela pour les thats div class avoir son arrière-plan fanée

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

la jquery qui est en un clic sur le bouton

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

colorera le gris clair de fond puis fondu revenir à la couleur orig J'espère que cela contribue

Answer 8

c'est pourquoi vous appelez fadeOut sur la balise span. pour obtenir l'animation arrière-plan de fondu, vous devez utiliser:

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

comme indiqué par mishac. une autre façon pourrait être quelque chose comme ceci:

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

le code ci-dessus fadeOut à 50% l'ensemble de balise span, puis change de fond et fadeIn. ce n'est pas ce que vous recherchez, mais crée une animation decet sans dépendre d'autres plugins jquery;)

Answer 9

La nouvelle entreprise jQuery UI vous permet de faire se transforme en couleurs d'arrière-plan sur la plupart des objets. Voir ici: http://jqueryui.com/demos/animate/

En ce qui concerne le gars demandant de faire un fond transparent sur capotage pour révéler une image ne serait-il pas plus simple de construire comme un capotage d'image jQuery normale comme les gens utilisent pour changer les images nav?

Answer 10

Vous voulez utiliser cette syntaxe:

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

Answer 11

Voici comment je l'ai fixé pour ma liste avec un vol stationnaire:

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

Une autre solution sans 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);
}

Démo: http://jsfiddle.net/5NB3s/3/