Bagaimana Anda memudarkan warna latar belakang menggunakan jquery?

Bagaimana cara memudarkan konten teks dengan jQuery?

Intinya adalah untuk menarik perhatian pengguna ke pesan tersebut.

Fungsionalitas yang tepat ini (cahaya 3 detik untuk menyorot pesan) diimplementasikan di jQuery UI sebagai efek sorotan

https://api.jqueryui.com/highlight-effect/

Warna dan durasi bervariasi

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/

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

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.

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 )

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

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.

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

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.