Fondu la couleur d'arrière-plan d'une balise span avec JQuery

Cela peut être fait avec le plugin color animation . Vous feriez alors quelque chose comme

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

Si l'utilisation de pure JQ pour effacer un arrière-plan ne fonctionne pas sans plugin, il existe une manière intelligente (mais pas progressivement améliorée) de le faire avec CSS3.

Cette fonction appliquera l'attribut "transition" à un élément donné via CSS Ensuite, l'élément reçoit une couleur d'arrière-plan dans laquelle CSS s'estompe.

Dans le cas où vous voulez que ce soit comme une vague ("regardez ici!"), après un délai d'une demi-seconde, une fonction est mise en file d'attente pour retourner l'élément en blanc.

Essentiellement jQ clignote simplement l'élément sur une couleur, puis revient 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.
}

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

Ensuite, tout ce que vous devez faire est:

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

Facile Comme Bonjour! Voir ceci en action: http://jsfiddle.net/matthewbj/jcSYp/

Essayez ceci

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

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

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

Simple. Pas besoin de plugin jqueryUI, outils 3ème partie et tout.

Je ne voulais pas utiliser un plugin Donc, pour fondre un arrière-plan dans et Hors j'ai inclus ceci pour la classe div c'est d'avoir son arrière-plan fané

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

Le jquery qui est dans un clic de bouton

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

Cela va colorer le fond gris clair, puis se fanent à la couleur d'origine J'espère que cela contribue

C'est pourquoi vous appelez fadeOut sur la balise span. pour obtenir l'animation de fondu d'arrière-plan, 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 va fadeout à 50% la balise span entière, puis Change background et fadeIn. ce n'est pas ce que vous cherchiez, mais crée une animation decet sans dépendre des autres plugins jquery;)

La nouvelle entreprise jQuery UI vous permet d'effectuer des transformations de couleur d'arrière-plan sur la plupart des objets. Voir ici : http://jqueryui.com/demos/animate/

Quant au gars qui demande de rendre un arrière-plan transparent sur roll-over pour révéler une image ne serait-il pas plus simple de le construire comme un roll-over d'image jQuery normal comme ceux que les gens utilisent pour changer d'image nav?

Vous voudrez utiliser cette syntaxe:

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

Voici comment je l'ai corrigé pour ma liste avec un hover:

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

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/