Verblassen die Hintergrundfarbe eines span-Tag mit JQuery

Question

Ich versuche, die Hintergrundfarbe eines span-Tag mit JQuery zu verblassen zu betonen, wenn eine Änderung aufgetreten ist. Ich dachte, der Code wie der folgende innerhalb des Click-Handler some sein würde, aber ich kann nicht scheinen, daran zu arbeiten. Können Sie mir zeigen, wo ich schief gelaufen? Dank Russ.

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

---

Das ist besser, aber jetzt verblasst es sowohl die Hintergrundfarbe des span-Tages und den Textwert der Spanne zu Tag. Ich versuche, die Hintergrundfarbe nur zu verblassen und den Text sichtbar lassen. Geht das?

Answer 1

OH, ich wusste nicht, dass Sie wollten die Farbe verblassen! OK, so müssen Sie die jQuery-Plugin Farbe überprüfen:

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

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

Und hier ist ein weiterer hilfreicher Abschnitt der jQuery docs Website:

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

Ich habe noch nie wirklich getan dies, damit ich nicht versuchen Sie den Code zu geben, aber ich glaube, die Farbe Plugin Sie die Funktionalität geben, die Sie benötigen.

Answer 2

Es kann mit der Farbanimation Plugin erfolgen. Sie würden dann so etwas wie

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

Answer 3

Wenn reines jQ mit einem Hintergrund verblassen funktioniert nicht ohne ein Plugin, gibt es einen cleveren (wenn auch nicht progressiv erweitert) Weg, dies mit CSS3 zu tun.

Diese Funktion wird das „Übergang“ Attribut zu einem bestimmten Elemente über CSS anwenden Als nächstes wird das Element eine Hintergrundfarbe gegeben, die CSS verblasst in.

Falls Sie dies wie eine Welle sein ( „hier!“), Nach einer Verzögerung von einer halben Sekunde, eine Funktion der Warteschlange gestellt wird das Element wieder auf weiß zu machen.

Im Wesentlichen blinkt jQ nur das Element auf eine Farbe, dann wieder auf weiß. CSS3 kümmert sich um das Verblassen.

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

Dies kann mit jQuery (oder jeder lib) & einfachen CSS-Hack getan werden:

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

Dann alles, was Sie tun müssen, ist:

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

Einfache Peasy! In Aktion sehen: http://jsfiddle.net/matthewbj/jcSYp/

Answer 5

Versuchen Sie, diese

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

Answer 6

Vielleicht spät zu beantworten, aber eine gerade Lösung Ihrer Antwort.

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

Einfach. Keine Notwendigkeit der jQueryUI Plugin, 3rd-Party-Tools und alle.

Answer 7

Ich will nicht ein Plugin verwenden, So verblassen einen Hintergrund in und out enthalten ich dies für die div class das ist ihr Hintergrund haben verblasst

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

die Jquery, die in einem Tastenklick ist

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

Damit wird der Hintergrund hellgraue Farbe und dann auf die orig Farbe verblassen zurück Ich hoffe, das trägt

Answer 8

das ist, warum Sie fadeOut auf dem span-Tag nennen. Hintergrund verblassen Animation zu erhalten, sollten Sie verwenden:

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

, wie durch mishac hingewiesen. eine andere Art und Weise so etwas wie dies sein könnte:

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

Der obige Code wird die gesamte Spanne Tag auf 50% Fadeout, dann ändert Hintergrund und fadeIn. es ist nicht das, was Sie suchen, sondern schafft eine decet Animation, ohne von anderen jQuery-Plugins abhängig;)

Answer 9

Der neueste jQuery UI Business ermöglicht es Ihnen, Hintergrund-Farbe verwandelt sich auf die meisten Objekte zu tun. Siehe hier: http://jqueryui.com/demos/animate/

Wie für den Mann fragen, um einen Hintergrund transparent über Umsturz ich ein Bild offenbaren würde es nicht einfacher, es zu bauen wie ein normales jQuery Bild Umsturz wie die, die Leute nav Bilder umschalten?

Answer 10

Sie wollen diese Syntax verwenden:

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

Answer 11

Dies ist, wie ich es mit einem Hover für meine Liste festgelegt:

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

Eine andere Lösung ohne 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/