คุณจะทำให้สีพื้นหลังจางลงโดยใช้ jquery ได้อย่างไร?

ฉันจะทำให้เนื้อหาข้อความจางลงด้วย jQuery ได้อย่างไร

ประเด็นคือการดึงความสนใจของผู้ใช้ไปที่ข้อความ

ฟังก์ชันที่แน่นอนนี้ (เรืองแสง 3 วินาทีเพื่อเน้นข้อความ) ถูกนำไปใช้ใน jQuery UI เป็นเอฟเฟกต์ไฮไลต์

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

สีและระยะเวลาเป็นตัวแปร

หากคุณต้องการทำให้สีพื้นหลังขององค์ประกอบเคลื่อนไหวโดยเฉพาะฉันเชื่อว่าคุณต้องรวมกรอบ jQueryUI จากนั้นคุณสามารถทำได้:

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

jQueryUI มีเอฟเฟกต์ในตัวที่อาจเป็นประโยชน์สำหรับคุณเช่นกัน

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

ฉันรู้ว่าคำถามคือจะทำอย่างไรกับ Jquery แต่คุณสามารถบรรลุผลเช่นเดียวกันได้ด้วย css ธรรมดาและ jquery เพียงเล็กน้อย ...

ตัวอย่างเช่นคุณมี div ที่มีคลาส "box" ให้เพิ่ม css ต่อไปนี้

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

จากนั้นใช้ฟังก์ชัน AddClass เพื่อเพิ่มคลาสอื่นที่มีสีพื้นหลังที่แตกต่างกันเช่น 'กล่องเน้นสี' หรืออะไรทำนองนั้นด้วย css ต่อไปนี้:

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

ฉันเป็นมือใหม่และอาจจะมีข้อเสียของวิธีนี้ แต่อาจเป็นประโยชน์สำหรับใครบางคน

นี่คือ codepen: https://codepen.io/anon/pen/baaLYB

โดยปกติแล้วคุณสามารถใช้.animate ()วิธีการที่จะจัดการกับคุณสมบัติ CSS โดยพลการ แต่สำหรับสีพื้นหลังที่คุณจำเป็นต้องใช้ปลั๊กอินสี เมื่อคุณรวมปลั๊กอินนี้แล้วคุณสามารถใช้บางอย่างเหมือนกับที่คนอื่นระบุ$('div').animate({backgroundColor: '#f00'})เพื่อเปลี่ยนสี

ตามที่คนอื่นเขียนไว้บางส่วนสามารถทำได้โดยใช้ไลบรารี jQuery UI เช่นกัน

ใช้ jQuery เท่านั้น (ไม่มีไลบรารี / ปลั๊กอิน UI) แม้แต่ jQuery ก็สามารถกำจัดได้อย่างง่ายดาย

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

การสาธิต: http://jsfiddle.net/5NB3s/2/

• SetTimeout เพิ่มความสว่างจาก 50% เป็น 100% โดยทำให้พื้นหลังเป็นสีขาว (คุณสามารถเลือกค่าใดก็ได้ขึ้นอยู่กับสีของคุณ)
• SetTimeout ถูกรวมไว้ในฟังก์ชันที่ไม่ระบุตัวตนเพื่อให้ทำงานได้อย่างถูกต้องในลูป ( เหตุผล )

ขึ้นอยู่กับการสนับสนุนเบราว์เซอร์ของคุณคุณสามารถใช้ภาพเคลื่อนไหว css การสนับสนุนเบราว์เซอร์คือ IE10 ขึ้นไปสำหรับภาพเคลื่อนไหว CSS นี่เป็นสิ่งที่ดีที่คุณไม่ต้องเพิ่ม jquery UI dependency หากเป็นเพียงไข่อีสเตอร์ขนาดเล็ก หากเป็นส่วนสำคัญในไซต์ของคุณ (หรือที่เรียกว่าจำเป็นสำหรับ IE9 และต่ำกว่า) ให้ใช้โซลูชัน jquery UI

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

จากนั้นสร้างเหตุการณ์คลิก jQuery ที่เพิ่มyour-animationคลาสให้กับองค์ประกอบที่คุณต้องการทำให้เคลื่อนไหวโดยเรียกให้พื้นหลังจางจากสีหนึ่งไปยังอีกสีหนึ่ง:

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

ฉันเขียนปลั๊กอิน jQuery ที่เรียบง่ายสุด ๆ เพื่อทำสิ่งที่คล้ายกับสิ่งนี้ ฉันต้องการบางสิ่งบางอย่างที่มีน้ำหนักเบามาก (มันลดลง 732 ไบต์) ดังนั้นการรวมปลั๊กอินขนาดใหญ่หรือ UI ก็ไม่เป็นปัญหาสำหรับฉัน มันยังค่อนข้างหยาบรอบ ๆ ขอบดังนั้นยินดีรับข้อเสนอแนะ

คุณสามารถเช็คเอาปลั๊กอินที่นี่: https://gist.github.com/4569265

การใช้ปลั๊กอินการสร้างเอฟเฟกต์ไฮไลต์จะเป็นเรื่องง่ายโดยการเปลี่ยนสีพื้นหลังจากนั้นเพิ่มsetTimeoutไฟเพื่อให้ปลั๊กอินจางกลับไปเป็นสีพื้นหลังเดิม

หากต้องการจางลงระหว่าง 2 สีโดยใช้จาวาสคริปต์ง่ายๆเท่านั้น:

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

ที่มา: http://www.pagecolumn.com/javascript/fade_text.htm

javascript จางลงเป็นสีขาวโดยไม่มี jQuery หรือไลบรารีอื่น ๆ :

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

ในการพิมพ์สีเหลืองจะเป็นสีน้ำเงินลบดังนั้นการเริ่มต้นด้วยองค์ประกอบ rgb ที่ 3 (สีน้ำเงิน) ที่น้อยกว่า 255 จะเริ่มด้วยไฮไลต์สีเหลือง จากนั้น10+ในการตั้งvar unBlueค่าจะเพิ่มค่าลบสีน้ำเงินจนกระทั่งถึง 255