Bagaimana Anda memudarkan warna latar belakang menggunakan jquery?


96

Bagaimana cara memudarkan konten teks dengan jQuery?

Intinya adalah untuk menarik perhatian pengguna ke pesan tersebut.



1
Anda tidak harus menggunakan warna atau plugin UI untuk menganimasikan warna latar belakang. Saya telah menjawab pertanyaan ini di sini .
matadur

Jawaban:



90

Jika Anda ingin secara khusus menganimasikan warna latar belakang suatu elemen, saya yakin Anda perlu menyertakan kerangka kerja jQueryUI. Kemudian Anda dapat melakukan:

$('#myElement').animate({backgroundColor: '#FF0000'}, 'slow');

jQueryUI memiliki beberapa efek bawaan yang mungkin berguna bagi Anda juga.

http://jqueryui.com/demos/effect/


3
Saya harus menyertakan "jQuery Color" untuk ini, yang juga ada di dokumen jquery ( "(Misalnya, lebar, tinggi, atau kiri dapat dianimasikan tetapi warna latar belakang tidak dapat, kecuali jika plugin jQuery.Color digunakan)" ).
Boris

'slow'bisa diganti dengan detik ... dimana 1000 sama dengan 1 detik ... dan seterusnya.
Pathros

25

Saya tahu bahwa pertanyaannya adalah bagaimana melakukannya dengan Jquery, tetapi Anda dapat mencapai pengaruh yang sama dengan css sederhana dan hanya sedikit jquery ...

Misalnya, Anda memiliki div dengan kelas 'box', tambahkan css berikut

.box {
background-color: black;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}

dan kemudian gunakan fungsi AddClass untuk menambahkan kelas lain dengan warna latar belakang yang berbeda seperti 'box highlighted' atau sesuatu seperti itu dengan css berikut:

.box.highlighted {
  background-color: white;
}

Saya seorang pemula dan mungkin ada beberapa kelemahan dari metode ini tapi mungkin itu akan membantu seseorang

Berikut codepennya: https://codepen.io/anon/pen/baaLYB


Solusi keren. Terima kasih.
thedp

Ini adalah solusi hebat yang berfungsi tanpa pustaka tambahan apa pun dan secara native didukung di semua browser modern. Terima kasih!
rprez

14

Biasanya Anda bisa menggunakan metode .animate () untuk memanipulasi properti CSS sewenang-wenang, tetapi untuk warna latar belakang Anda perlu menggunakan plugin warna . Setelah Anda memasukkan plugin ini, Anda dapat menggunakan sesuatu seperti yang ditunjukkan orang lain$('div').animate({backgroundColor: '#f00'}) oleh untuk mengubah warnanya.

Seperti yang telah ditulis orang lain, beberapa di antaranya dapat dilakukan menggunakan pustaka jQuery UI juga.


9

Hanya menggunakan jQuery (tidak ada pustaka / plugin UI). Bahkan jQuery dapat dengan mudah dihilangkan

//Color row background in HSL space (easier to manipulate fading)
$('tr').eq(1).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(){
            $('tr').eq(1).css('backgroundColor','hsl(0,100%,'+ii+'%)'); 
        }, dd);    
    })(i,d);
}

Demo: http://jsfiddle.net/5NB3s/2/

  • SetTimeout meningkatkan kecerahan dari 50% menjadi 100%, pada dasarnya membuat latar belakang putih (Anda dapat memilih nilai apa pun tergantung pada warna Anda).
  • SetTimeout dibungkus dalam fungsi anonim agar berfungsi dengan baik dalam satu lingkaran ( alasan )

8

Bergantung pada dukungan browser Anda, Anda dapat menggunakan animasi css. Dukungan browser IE10 dan yang lebih baru untuk animasi CSS. Ini bagus sehingga Anda tidak perlu menambahkan ketergantungan UI jquery jika hanya telur paskah kecil. Jika itu integral ke situs Anda (alias diperlukan untuk IE9 dan di bawahnya) gunakan solusi UI jquery.

.your-animation {
    background-color: #fff !important;
    -webkit-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
//You have to add the vendor prefix versions for it to work in Firefox, Safari, and Opera.
@-webkit-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
-moz-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-moz-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
-ms-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-ms-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
-o-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-o-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}

Selanjutnya buat acara klik jQuery yang menambahkan your-animationkelas ke elemen yang ingin Anda animasikan, memicu pemudaran latar belakang dari satu warna ke warna lain:

$(".some-button").click(function(e){
    $(".place-to-add-class").addClass("your-animation");
});

2
Sejauh ini, ini adalah solusi terbaik. Berikut Demo di JSfiddle.net
Ricardo Zea

4

Saya menulis plugin jQuery super sederhana untuk mencapai sesuatu yang mirip dengan ini. Saya menginginkan sesuatu yang sangat ringan (diperkecil 732 byte), jadi termasuk plugin atau UI yang besar bukanlah pertanyaan bagi saya. Ini masih agak kasar di sekitar tepinya, jadi umpan balik diterima.

Anda dapat memeriksa plugin di sini: https://gist.github.com/4569265 .

Menggunakan plugin, akan menjadi masalah sederhana untuk membuat efek sorotan dengan mengubah warna latar belakang dan kemudian menambahkan setTimeoutuntuk mengaktifkan plugin agar memudar kembali ke warna latar belakang aslinya.


Dominik P: terima kasih untuk plugin 'kecil' Anda. Ini sesuai dengan kebutuhan saya!
psulek

3

Untuk memudar antara 2 warna hanya dengan menggunakan javascript sederhana:

function Blend(a, b, alpha) {
  var aa = [
        parseInt('0x' + a.substring(1, 3)), 
        parseInt('0x' + a.substring(3, 5)), 
        parseInt('0x' + a.substring(5, 7))
    ];

  var bb = [
        parseInt('0x' + b.substring(1, 3)), 
        parseInt('0x' + b.substring(3, 5)), 
        parseInt('0x' + b.substring(5, 7))
    ];

  r = '0' + Math.round(aa[0] + (bb[0] - aa[0])*alpha).toString(16);
  g = '0' + Math.round(aa[1] + (bb[1] - aa[1])*alpha).toString(16);
  b = '0' + Math.round(aa[2] + (bb[2] - aa[2])*alpha).toString(16);

  return '#'
        + r.substring(r.length - 2)
        + g.substring(g.length - 2)
        + b.substring(b.length - 2);
}

function fadeText(cl1, cl2, elm){
  var t = [];
  var steps = 100;
  var delay = 3000;

  for (var i = 0; i < steps; i++) {
    (function(j) {
         t[j] = setTimeout(function() {
          var a  = j/steps;
          var color = Blend(cl1,cl2,a);
          elm.style.color = color;
         }, j*delay/steps);
    })(i);
  }

  return t;
}

var cl1 = "#ffffff";
var cl2 = "#c00000";
var elm = document.getElementById("note");
T  = fadeText(cl1,cl2,elm);

Sumber: http://www.pagecolumn.com/javascript/fade_text.htm


0

javascript memudar menjadi putih tanpa jQuery atau pustaka lain:

<div id="x" style="background-color:rgb(255,255,105)">hello world</div>
<script type="text/javascript">
var gEvent=setInterval("toWhite();", 100);
function toWhite(){
    var obj=document.getElementById("x");
    var unBlue=10+parseInt(obj.style.backgroundColor.split(",")[2].replace(/\D/g,""));
    if(unBlue>245) unBlue=255;
    if(unBlue<256) obj.style.backgroundColor="rgb(255,255,"+unBlue+")";
    else clearInterval(gEvent)
}
</script>

Dalam pencetakan, kuning minus biru, jadi dimulai dengan elemen rgb ke-3 (biru) dengan kurang dari 255 dimulai dengan sorotan kuning. Kemudian 10+dalam pengaturan var unBluenilai menambah minus biru hingga mencapai 255.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.