Làm cách nào để bạn làm mờ màu nền bằng cách sử dụng jquery?

Làm cách nào để làm mờ nội dung văn bản với jQuery?

Mục đích là thu hút sự chú ý của người dùng vào tin nhắn.

Chức năng chính xác này (phát sáng 3 giây để đánh dấu tin nhắn) được triển khai trong giao diện người dùng jQuery làm hiệu ứng nổi bật

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

Màu sắc và thời lượng có thể thay đổi

Nếu bạn muốn tạo hoạt ảnh cụ thể cho màu nền của một phần tử, tôi tin rằng bạn cần phải bao gồm khung jQueryUI. Sau đó, bạn có thể làm:

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

jQueryUI có một số hiệu ứng tích hợp có thể hữu ích cho bạn.

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

Tôi biết rằng câu hỏi là làm thế nào để thực hiện điều đó với Jquery, nhưng bạn có thể đạt được hiệu quả tương tự với css đơn giản và chỉ một chút jquery ...

Ví dụ: bạn có một div với lớp 'box', hãy thêm css sau

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

và sau đó sử dụng hàm AddClass để thêm một lớp khác với màu nền khác như 'hộp được đánh dấu' hoặc tương tự như vậy với css sau:

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

Tôi là người mới bắt đầu và có thể có một số nhược điểm của phương pháp này nhưng có thể nó sẽ hữu ích cho ai đó

Đây là mã hóa: https://codepen.io/anon/pen/baaLYB

Thông thường, bạn có thể sử dụng phương thức .animate () để thao tác các thuộc tính CSS tùy ý, nhưng đối với màu nền, bạn cần sử dụng plugin màu . Khi bạn bao gồm plugin này, bạn có thể sử dụng thứ gì đó giống như những người khác đã chỉ định$('div').animate({backgroundColor: '#f00'}) để thay đổi màu sắc.

Như những người khác đã viết, một số điều này cũng có thể được thực hiện bằng cách sử dụng thư viện giao diện người dùng jQuery.

Chỉ sử dụng jQuery (không có thư viện / plugin giao diện người dùng). Ngay cả jQuery cũng có thể dễ dàng bị loại bỏ

//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 tăng độ sáng từ 50% lên 100%, về cơ bản là làm cho nền trắng (bạn có thể chọn bất kỳ giá trị nào tùy thuộc vào màu sắc của mình).
• SetTimeout được bao bọc trong một hàm ẩn danh để nó hoạt động bình thường trong một vòng lặp ( lý do )

Tùy thuộc vào hỗ trợ trình duyệt của bạn, bạn có thể sử dụng hoạt ảnh css. Hỗ trợ trình duyệt là IE10 trở lên cho hoạt ảnh CSS. Điều này thật tuyệt nên bạn không cần phải thêm sự phụ thuộc vào giao diện người dùng jquery nếu nó chỉ là một quả trứng phục sinh nhỏ. Nếu nó không thể thiếu đối với trang web của bạn (còn được gọi là cần thiết cho IE9 trở xuống), hãy sử dụng giải pháp giao diện người dùng 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;}
}

Tiếp theo, tạo sự kiện nhấp chuột jQuery để thêm your-animationlớp vào phần tử bạn muốn tạo hoạt ảnh, kích hoạt nền mờ dần từ màu này sang màu khác:

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

Tôi đã viết một plugin jQuery siêu đơn giản để thực hiện một cái gì đó tương tự như thế này. Tôi muốn một thứ gì đó thực sự nhẹ (nó được rút gọn 732 byte), vì vậy việc bao gồm một plugin hoặc giao diện người dùng lớn là điều không thể đối với tôi. Nó vẫn còn hơi thô xung quanh các cạnh, vì vậy chúng tôi hoan nghênh phản hồi.

Bạn có thể kiểm tra plugin tại đây: https://gist.github.com/4569265 .

Sử dụng plugin, sẽ là một vấn đề đơn giản để tạo hiệu ứng nổi bật bằng cách thay đổi màu nền và sau đó thêm một setTimeoutkích hoạt để plugin mờ dần trở lại màu nền ban đầu.

Để làm mờ dần giữa 2 màu chỉ bằng cách sử dụng javascript đơn giản:

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

Nguồn: http://www.pagecolumn.com/javascript/fade_text.htm

javascript chuyển sang màu trắng mà không có jQuery hoặc thư viện khác:

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

Trong in ấn, màu vàng bị trừ đi màu xanh lam, vì vậy bắt đầu với phần tử rgb thứ 3 (màu xanh lam) ở dưới 255 bắt đầu bằng điểm đánh dấu màu vàng. Sau đó, giá trị 10+trong cài đặt sẽ var unBluetăng lên trừ đi màu xanh lam cho đến khi nó đạt đến 255.