web-dev-qa-db-fra.com

Fontez la couleur de fond d'une étiquette de span avec jQuery

J'essaie de fader la couleur d'arrière-plan d'une balise d'enveloppe à l'aide de JQuery pour souligner quand un changement s'est produit. Je pensais que le code serait quelque chose comme ce qui suit à l'intérieur du gestionnaire de clics, mais je n'arrive pas à le faire fonctionner. Pouvez-vous me montrer où je me suis trompé? Merci russ.

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

C'est mieux, mais maintenant, il fausse à la fois la couleur de fond de la balise de l'espace et la valeur de texte de la balise de l'espace. J'essaie de faborer la couleur de fond et de laisser le texte visible. Cela peut-il être fait?

jqueryjquery-animatefadebackground-colorhtml
24
Russ Clark

Oh, je n'ai pas réalisé que vous vouliez fausser la couleur! OK, vous devez donc vérifier le plug-in jQuery Color:

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

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

Et voici une autre section utile du site JQuery Docs:

http://docs.jquery.com/release:jquery_1.2/effects#color_animations

Je n'ai jamais réellement fait cela, donc je n'essaierai pas de vous donner du code, mais j'imagine que le plug-in de couleur vous donnera la fonctionnalité dont vous avez besoin.

10
Brandon Montgomery

Cela peut être fait avec le plugin d'animation couleur . Tu ferais alors quelque chose comme

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

Si vous utilisez Pure JQ pour fadener un arrière-plan ne fonctionne pas sans plug-in, il existe un moyen intelligent (bien que non progressivement amélioré) de le faire avec CSS3.

Cette fonction appliquera l'attribut "Transition" à un élément donné via CSS Suivant, l'élément est donné une couleur d'arrière-plan que CSS s'estompe.

Si vous voulez que cela soit comme une vague ("regarder ici!"), Après un délai d'une demi-seconde, une fonction est mise en file d'attente de retourner l'élément en blanc.

Essentiellement, JQ clignote simplement l'élément sur une couleur, puis de retour au blanc. CSS3 prend soin de la décoloration.

//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.
}
10
Adam Grant

Cela peut être fait avec JQuery (ou n'importe quel livre LIB) et un SIMPLE CSS Hack:

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

Ensuite, tout ce que vous avez à faire est:

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

Peasy facile! Voir ceci en action: http://jsfiddle.net/matthewbj/jcsyp/

9
honyovk

Essaye ça

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

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

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

Simple. Pas besoin de plugin JQueryui, d'outils tiers et de tous.

3
Aakash Sahai

Je n'ai pas voulu utiliser un plugin afin de foncer une formation d'arrière-plan dans et je l'ai inclus ceci pour la classe DIV qui doit avoir son fond fané

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

la jQuery qui est dans un bouton cliquez

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

Cela colorera le fond de fond gris clair puis disparaître à la couleur origienne, j'espère que cela contribue

2
Steve Whitby

La dernière entreprise de l'interface utilisateur JQuery vous permet de faire des transformations de couleur de fond sur la plupart des objets. Voyez ici: http://jqueryui.com/demos/animate/

En ce qui concerne le gars qui demandait de faire un fond transparent sur le déploiement pour révéler une image ne serait-il pas plus simple de le construire comme une image normale de jQuery roll-sur-dessus comme celles que les gens utilisent pour changer d'images de navigation?

1
MeanMatt

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

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

0
user

Vous voudrez utiliser cette syntaxe:

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

C'est comme ça que j'ai corrigé ma liste avec une survolte:

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'); });
});
0
Zymotik