Memudarkan warna latar belakang tag span dengan JQuery

OH, aku tidak sadar kamu ingin memudarkan warnanya! Oke, jadi Anda perlu memeriksa plugin warna jQuery:

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

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

Dan inilah bagian bermanfaat lainnya dari situs dokumen jQuery:

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

Saya belum pernah melakukan ini jadi saya tidak akan mencoba memberi Anda kode, tapi saya membayangkan plugin warna akan memberi Anda fungsionalitas yang Anda butuhkan.

Hal ini dapat dilakukan dengan plugin animasi warna. Anda kemudian akan melakukan sesuatu seperti

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

Jika menggunakan jQ murni untuk memudarkan latar belakang tidak berfungsi tanpa plugin, ada cara cerdas (walaupun tidak semakin ditingkatkan) untuk melakukan ini dengan CSS3.

Fungsi ini akan menerapkan atribut "transisi" ke elemen tertentu melalui CSS. Selanjutnya, elemen tersebut diberi warna latar belakang yang memudarkan CSS.

Jika Anda ingin ini menjadi seperti gelombang ("lihat di sini!"), setelah penundaan setengah detik, sebuah fungsi dimasukkan ke dalam antrian untuk mengubah elemen kembali menjadi putih.

Intinya jQ hanya mengedipkan elemen ke satu warna, lalu kembali ke putih. CSS3 menangani pemudaran.

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

Ini dapat dilakukan dengan jQuery (atau lib apa pun) & peretasan CSS sederhana:

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

Lalu, yang perlu Anda lakukan hanyalah:

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

Mudah sekali! Lihat cara kerjanya: http://jsfiddle.net/matthewbj/jcSYp/

Coba ini

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

Mungkin terlambat untuk menjawab, tetapi solusi langsung untuk jawaban Anda.

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

Sederhana. Tidak memerlukan plugin jqueryUI, alat pihak ketiga, dan semuanya.

Saya tidak ingin menggunakan plugin Jadi untuk memudarkan latar belakang masuk dan keluar saya menyertakan ini untuk kelas div yang latar belakangnya memudar

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

jquery yang ada di klik tombol

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

Ini akan mewarnai latar belakang abu-abu terang dan kemudian memudar kembali ke warna aslinya. Saya harap ini berkontribusi

itu sebabnya Anda memanggil fadeOut pada tag span. untuk mendapatkan animasi pudar latar belakang, Anda harus menggunakan:

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

seperti yang ditunjukkan oleh mishac. cara lain bisa seperti ini:

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

kode di atas akan memudar hingga 50% dari seluruh tag span, kemudian mengubah latar belakang dan fadeIn. itu bukan yang Anda cari, tetapi membuat animasi yang bagus tanpa bergantung pada plugin jquery lainnya;)

Bisnis jQuery UI terbaru memungkinkan Anda melakukan transformasi warna latar belakang pada sebagian besar objek. Lihat di sini: http://jqueryui.com/demos/animate/

Adapun orang yang bertanya tentang membuat latar belakang transparan saat roll-over untuk menampilkan gambar, bukankah lebih mudah untuk membuatnya seperti roll-over gambar jQuery biasa seperti yang digunakan orang untuk mengganti gambar nav?

Anda ingin menggunakan sintaks ini:

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

Inilah cara saya memperbaikinya untuk daftar saya dengan 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'); });
});

Solusi lain tanpa 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/