Làm thế nào để bạn tạo một phần tử Flash Flash trong jQuery


249

Tôi hoàn toàn mới với jQuery và có một số kinh nghiệm khi sử dụng Prototype. Trong Prototype, có một phương thức "flash" một phần tử - tức là. làm nổi bật ngắn gọn nó bằng một màu khác và làm cho nó mờ dần trở lại bình thường để mắt người dùng bị hút vào đó. Có một phương thức như vậy trong jQuery? Tôi thấy fadeIn, fadeOut và animate, nhưng tôi không thấy bất cứ thứ gì như "flash". Có lẽ một trong ba có thể được sử dụng với đầu vào thích hợp?


4
Điều này không trả lời OP, nhưng mã (được thử nghiệm lỏng lẻo) có thể hữu ích cho những người tìm kiếm google trong tương lai (chẳng hạn như tôi):$.fn.flash = function(times, duration) { var T = this; times = times || 3; duration = duration || 200; for ( var i=0; i < times; i++ ) { (function() { setTimeout(function() { T.fadeOut(duration, function() { T.fadeIn(duration); }); }, i*duration*2+50); })(i); } };
Cory Mawhorter 22/03 '

3
thêm css này vào phần tử : text-decoration:blink, sau đó loại bỏ nó.
Mất trí nhớ


Tôi đặt một bản demo JSFiddle ở đây mà tôi nghĩ là một câu trả lời tốt hơn tôi tìm thấy trên trang này: stackoverflow.com/a/52283660/470749
Ryan

Xin lưu ý rằng nháy mắt chính thức không được ủng hộ trong hoạt hình. Kiểm tra tại: w3.org/TR/2019/CR-css-text-decor-3-20190813/#valdef-text-decor-line-blink
OrizG

Câu trả lời:


318

Cách của tôi là .fadein, .fadeout .fadein, .fadeout ......

$("#someElement").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);


14
Không phải là giải pháp đẹp nhất, nhưng ngắn gọn, dễ hiểu và không yêu cầu UI / hiệu ứng. Đẹp!
Chris Jaynes

21
tôi sử dụng độ trễ trước chuỗi fadeIn, fadeOut, đại loại như $('..').delay(100).fadeOut().fadeIn('slow')
alexandru.topliceanu

1
hình nền nhấp nháy thường trông khó nhìn, hoặc chỉ đơn giản là chói tai - đặc biệt là nếu vật phẩm bạn đang nhấp nháy đang ngồi trên nền trắng trơn. hãy thử điều này trước khi thêm plugin màu và thử flash nền, v.v.
Simon_Weaver

4
Vấn đề với phương pháp này là những sự kiện này có khả năng giẫm đạp lên nhau. Bạn có lẽ nên đặt từng fadeIn tiếp theo và fadeOut trong các cuộc gọi lại tương ứng của họ. Ví dụ: var $someElement = $("#someElement"); $someElement.fadeIn(100, function(){ $someElement.fadeOut(100, function(){ /*...etc...*/ }) })
thekingoftruth

Coi chừng sử dụng mã này trong mã xác nhận có thể được gọi thường xuyên. Nếu mã được gọi đúng thời điểm, bạn có thể kết thúc bằng một phần tử hiển thị khi không nên (hoặc ngược lại)
Chris Pfohl

122

Bạn có thể sử dụng plugin jQuery Color .

Ví dụ: để thu hút sự chú ý đến tất cả các div trên trang của bạn, bạn có thể sử dụng mã sau:

$("div").stop().css("background-color", "#FFFF9C")
    .animate({ backgroundColor: "#FFFFFF"}, 1500);

Chỉnh sửa - Mới và cải tiến

Sau đây sử dụng kỹ thuật tương tự như trên, nhưng nó có các lợi ích bổ sung của:

  • màu sắc nổi bật và thời lượng
  • giữ lại màu nền ban đầu, thay vì cho rằng đó là màu trắng
  • là một phần mở rộng của jQuery, vì vậy bạn có thể sử dụng nó trên bất kỳ đối tượng nào

Mở rộng đối tượng jQuery:

var notLocked = true;
$.fn.animateHighlight = function(highlightColor, duration) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    var originalBg = this.css("backgroundColor");
    if (notLocked) {
        notLocked = false;
        this.stop().css("background-color", highlightBg)
            .animate({backgroundColor: originalBg}, animateMs);
        setTimeout( function() { notLocked = true; }, animateMs);
    }
};

Ví dụ sử dụng:

$("div").animateHighlight("#dd0000", 1000);

4
Nó cũng không hoạt động với tôi - bạn có chắc chắn điều này không dựa vào plugin hoạt hình màu không? plugins.jquery.com/project/color
UpTheCreek

18
Từ tài liệu jquery trên .animate (): Tất cả các thuộc tính hoạt hình phải là một giá trị số duy nhất (trừ khi được ghi chú bên dưới); các thuộc tính không phải là số không thể hoạt hình bằng chức năng cơ bản của jQuery. (Ví dụ: chiều rộng, chiều cao hoặc bên trái có thể là hình động nhưng màu nền thì không thể.) Vì vậy, tôi đoán bạn đang sử dụng một plugin mà không nhận ra nó.
UpTheCux

4
Tôi nhận thấy nó không trả lại một đối tượng. Tôi đã thử xếp chồng hiệu ứng nhỏ này (EG: $ ("# qtyonhand"). AnimateHighlight ("# c3d69b", 1500) .delay (1500) .animateHighlight ("# 76923C", 5000);) và đã gặp lỗi. Tôi cần thêm "trả lại cái này;" đến cuối phương thức
Hiền nhân

2
Tài liệu jQuery chính thức nói rằng bạn phải sử dụng plugin jQuery.Color () để làm việc này: github.com/jquery/jquery-color
jchook

3
Từ các tài liệu janery .animate: Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated.- Nếu bạn muốn tạo hiệu ứng màu, bạn CẦN jQuery UI hoặc một số plugin khác.
Adam Tomat

101

Bạn có thể sử dụng hoạt hình css3 để flash một phần tử

.flash {
  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;

  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;

  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;
}

@keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-webkit-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-moz-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-ms-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

Và bạn jQuery để thêm lớp

jQuery(selector).addClass("flash");

Giải pháp tốt đẹp, nếu nó chỉ cần làm việc một lần. Sau khi lớp được thêm vào, sau đó thêm lớp không (về mặt logic) sẽ không dẫn đến việc flash phần tử.
simon

7
Ý tưởng tốt nhất bao giờ hết. Tôi đã sử dụng một khoản thanh toán để loại bỏ lớp 2 giây sau khi có hiệu lực
ký vào

6
Đây là một ví dụ về việc loại bỏ lớp sau khi hoạt ảnh hoàn thành để bạn có thể tiếp tục flash nó. jsfiddle.net/daCrosby/eTcXX/1
DACrosby

Tuyệt vời, nó hoạt động, nhưng lưu ý rằng thuộc tính chính xác cho màu nền là 'trong suốt' thay vì 'không' nếu bạn muốn vượt qua trình xác nhận trang mẫu.
Jan M

1
Lưu ý rằng tất cả các trình duyệt hiện đại bây giờ hỗ trợ thường xuyên @keyframesanimationquy tắc, do đó không cần phải sử dụng bất kỳ phiên bản tiền tố ngoài có thể -webkit- (đối với trình duyệt Blackberry).
coredumperror

74

Sau 5 năm ... (Và không cần thêm plugin)

Cái này "biến" nó thành màu bạn muốn (ví dụ như màu trắng) bằng cách đặt màu nền div phía sau nó, sau đó làm mờ dần vật thể ra ngoài.

Đối tượng HTML (ví dụ nút):

<div style="background: #fff;">
  <input type="submit" class="element" value="Whatever" />
</div>

jQuery (vanilla, không có plugin nào khác):

$('.element').fadeTo(100, 0.3, function() { $(this).fadeTo(500, 1.0); });

phần tử - tên lớp

số đầu tiên tính bằng fadeTo()mili giây cho quá trình chuyển đổi

số thứ hai trong fadeTo()- độ mờ đục của đối tượng sau khi mờ dần

Bạn có thể kiểm tra điều này ở góc dưới bên phải của trang web này: https://single.majlovesreg.one/v1/

Chỉnh sửa (willsteel) không có bộ chọn trùng lặp bằng cách sử dụng $ (cái này) và các giá trị được điều chỉnh để thực hiện một cách chớp nhoáng (như OP yêu cầu).


60
fadeTo(0000)- Metallica
quạ Vulcan

2
Mịn như bơ! Giải pháp tốt nhất của tất cả. Cảm ơn!
ColdTuna

1
Làm thế nào để làm điều này vô hạn?
tomexsans

1
Ví dụ liên kết bị hỏng.
lưới

1
@tomexsans $.fn.flashUnlimited=function(){$(this).fadeTo('medium',0.3,function(){$(this).fadeTo('medium',1.0,$(this).flashUnlimited);});}Sau đó, bạn có thể gọi nó như thế $('#mydiv').flashUnlimited();- Nó thực hiện những gì Majal đã trả lời ở trên và tự gọi lại vào cuối chu kỳ.
Jay Dadhania

46

Bạn có thể sử dụng hiệu ứng đánh dấu trong UI UI để đạt được điều tương tự, tôi đoán vậy.


8
Đó là một phần của jQueryUI, khá nặng, không phải là một phần của Thư viện jQuery tiêu chuẩn (mặc dù bạn chỉ có thể sử dụng lõi hiệu ứng UI mà nó dựa vào).
UpTheCux

3
Bạn chỉ có thể tải xuống lõi hiệu ứng + hiệu ứng bạn muốn, với số lượng "tô sáng" + "xung" lên tới 12 KB. Không hoàn toàn nhẹ, nhưng cũng không nặng.
Roman Starkov

45

Nếu bạn đang sử dụng jQueryUI, có pulsatechức năng trongUI/Effects

$("div").click(function () {
      $(this).effect("pulsate", { times:3 }, 2000);
});

http://docs.jquery.com/UI/Effects/Pulsate


1
@DavidYell, mở một câu hỏi mới và đăng một số mã mẫu. pulsatehoạt động tốt trong Chrome.
SooDesuNe

Nhấp nháy cứ sau 5 giây: setInterval (function () {$ (". Red-flag"). Effect ("pulsate", {lần: 3}, 2000);}, 5000);
Adrian P.

@all Có ai bây giờ nếu điều này sử dụng hoạt hình css3 và / hoặc biến đổi? Dù sao cũng tốt (nhưng tôi vẫn thích css3 như một trong những câu trả lời khác)
Martin Meeser

18
$('#district').css({opacity: 0});
$('#district').animate({opacity: 1}, 700 );

1
Đây chỉ là đơn giản và thanh lịch.
Gra

Trong khi sử dụng fadeInfadeOutảnh hưởng đến các yếu tố anh chị em khác vì nó làm đảo lộn displaytài sản css , trông thật kỳ lạ trong trường hợp của tôi. Nhưng cái này sửa vấn đề. Cảm ơn, nó hoạt động thanh lịch như một nét duyên dáng.
fsevenm

15

Bạn có thể sử dụng plugin này (đặt nó trong tệp js và sử dụng nó thông qua thẻ script)

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

Và sau đó sử dụng một cái gì đó như thế này:

jQuery.fn.flash = function( color, duration )
{

    var current = this.css( 'color' );

    this.animate( { color: 'rgb(' + color + ')' }, duration / 2 );
    this.animate( { color: current }, duration / 2 );

}

Điều này thêm phương thức 'flash' vào tất cả các đối tượng jQuery:

$( '#importantElement' ).flash( '255,0,0', 1000 );

12

Bạn có thể mở rộng phương thức của Desheng Li hơn nữa bằng cách cho phép số lần lặp thực hiện nhiều lần nhấp nháy như vậy:

// Extend jquery with flashing for elements
$.fn.flash = function(duration, iterations) {
    duration = duration || 1000; // Default to 1 second
    iterations = iterations || 1; // Default to 1 iteration
    var iterationDuration = Math.floor(duration / iterations);

    for (var i = 0; i < iterations; i++) {
        this.fadeOut(iterationDuration).fadeIn(iterationDuration);
    }
    return this;
}

Sau đó, bạn có thể gọi phương thức với thời gian và số lần nhấp nháy:

$("#someElementId").flash(1000, 4); // Flash 4 times over a period of 1 second

Thay đổi để var iterationDuration = Math.floor(duration / iterations);bạn có thể chia cho các số lẻ và làm cho nó return this;để bạn có thể xâu chuỗi các phương thức khác sau nó.
dùng1477388

Điều này không thực sự thay đổi màu sắc của bất cứ điều gì mặc dù?
đêm

12

Giải pháp jQuery thuần túy.

(không cần jquery-ui / animate / màu.)

Nếu tất cả những gì bạn muốn là hiệu ứng "flash" màu vàng mà không tải màu jquery:

var flash = function(elements) {
  var opacity = 100;
  var color = "255, 255, 20" // has to be in this format since we use rgba
  var interval = setInterval(function() {
    opacity -= 3;
    if (opacity <= 0) clearInterval(interval);
    $(elements).css({background: "rgba("+color+", "+opacity/100+")"});
  }, 30)
};

Kịch bản trên chỉ đơn giản là làm mờ dần màu vàng 1s, hoàn hảo để cho người dùng biết phần tử đã được cập nhật hoặc một cái gì đó tương tự.

Sử dụng:

flash($('#your-element'))

Yêu giải pháp này, ngoại trừ nền không quay trở lại như trước đây
MrPHP

7

Đây có thể là một câu trả lời cập nhật hơn, và ngắn hơn, vì mọi thứ đã được củng cố phần nào kể từ bài đăng này. Yêu cầu jquery-ui-effect-highlight .

$("div").click(function () {
  $(this).effect("highlight", {}, 3000);
});

http://docs.jquery.com/UI/Effects/Highlight


7

Làm thế nào về một câu trả lời thực sự đơn giản?

$('selector').fadeTo('fast',0).fadeTo('fast',1).fadeTo('fast',0).fadeTo('fast',1)

Nháy mắt hai lần ... đó là tất cả mọi người!


Điều đó không nhấp nháy trong một màu khác (được yêu cầu) điều này chỉ đơn giản làm mờ dần độ mờ đục trong và ngoài.
Tim Eckel

6

Tôi không thể tin rằng đây không phải là câu hỏi này. Tất cả bạn phải làm:

("#someElement").show('highlight',{color: '#C8FB5E'},'fast');

Điều này thực hiện chính xác những gì bạn muốn nó làm, siêu dễ dàng, hoạt động cho cả hai show()hide()phương pháp.


15
Lưu ý: để làm việc này, bạn cần thêm hiệu ứng của jquery ui. nó không phải là một phần của jQuery lõi
travis-146

6

Sẽ hiệu ứng xung(ngoại tuyến) Plugin JQuery có phù hợp với những gì bạn đang tìm kiếm không?

Bạn có thể thêm thời lượng để hạn chế hiệu ứng xung theo thời gian.


Như JP đã đề cập trong các bình luận, giờ đây đã có plugin xung cập nhật của anh ấy . Xem repo GitHub của anh ấy . Và đây là một bản demo .



Bản demo bị hỏng, vì thư viện js mà nó đề cập đến không tồn tại
PandaWood

@PandaWood Tôi đã khôi phục liên kết đến repo GitHub và cập nhật bản demo
VonC

6
function pulse() {
    $('.blink').fadeIn(300).fadeOut(500);
}
setInterval(pulse, 1000);

1
Chính xác. Đơn giản, và kiểm soát hoàn toàn trên mờ dần và mờ dần.

5

Đã tìm thấy nhiều mặt trăng sau này nhưng nếu bất cứ ai quan tâm, có vẻ như đây là một cách hay để lấy thứ gì đó nhấp nháy vĩnh viễn:

$( "#someDiv" ).hide();

setInterval(function(){
     $( "#someDiv" ).fadeIn(1000).fadeOut(1000);
},0)

4

Các mã sau đây làm việc cho tôi. Xác định hai hàm mờ dần và mờ dần và đặt chúng vào hàm gọi lại của nhau.

var fIn = function() { $(this).fadeIn(300, fOut); };
var fOut = function() { $(this).fadeOut(300, fIn); };
$('#element').fadeOut(300, fIn);

Sau đây kiểm soát thời gian nhấp nháy:

var count = 3;
var fIn = function() { $(this).fadeIn(300, fOut); };
var fOut = function() { if (--count > 0) $(this).fadeOut(300, fIn); };
$('#element').fadeOut(300, fIn);

4

Tôi đã tìm kiếm một giải pháp cho vấn đề này nhưng không dựa vào jQuery UI.

Đây là những gì tôi nghĩ ra và nó hoạt động với tôi (không có plugin, chỉ có Javascript và jQuery); - Đây là câu đố làm việc - http://jsfiddle.net/CriddleCraddle/yYcaY/2/

Đặt tham số CSS hiện tại trong tệp CSS của bạn là css bình thường và tạo một lớp mới vừa xử lý tham số để thay đổi tức là màu nền và đặt nó thành '! Quan trọng' để ghi đè hành vi mặc định. như thế này...

.button_flash {
background-color: #8DABFF !important;
}//This is the color to change to.  

Sau đó, chỉ cần sử dụng hàm bên dưới và truyền vào phần tử DOM dưới dạng một chuỗi, một số nguyên cho số lần bạn muốn flash xuất hiện, lớp bạn muốn thay đổi và một số nguyên cho độ trễ.

Lưu ý: Nếu bạn chuyển một số chẵn cho biến số 'lần', bạn sẽ kết thúc với lớp bạn đã bắt đầu và nếu bạn vượt qua một số lẻ, bạn sẽ kết thúc với lớp được bật. Cả hai đều hữu ích cho những thứ khác nhau. Tôi sử dụng 'i' để thay đổi thời gian trễ, hoặc tất cả chúng sẽ bắn cùng một lúc và hiệu ứng sẽ bị mất.

function flashIt(element, times, klass, delay){
  for (var i=0; i < times; i++){
    setTimeout(function(){
      $(element).toggleClass(klass);
    }, delay + (300 * i));
  };
};

//Then run the following code with either another delay to delay the original start, or
// without another delay.  I have provided both options below.

//without a start delay just call
flashIt('.info_status button', 10, 'button_flash', 500)

//with a start delay just call
setTimeout(function(){
  flashIt('.info_status button', 10, 'button_flash', 500)
}, 4700);
// Just change the 4700 above to your liking for the start delay.  In this case, 
//I need about five seconds before the flash started.  

3

Giống như fadein / fadeout, bạn có thể sử dụng css / delay animate

$(this).stop(true, true).animate({opacity: 0.1}, 100).delay(100).animate({opacity: 1}, 100).animate({opacity: 0.1}, 100).delay(100).animate({opacity: 1}, 100);

Đơn giản và linh hoạt


3
$("#someElement").fadeTo(3000, 0.3 ).fadeTo(3000, 1).fadeTo(3000, 0.3 ).fadeTo(3000, 1); 

3000 là 3 giây

Từ độ mờ 1, nó mờ dần thành 0,3, sau đó đến 1 và cứ thế.

Bạn có thể xếp nhiều hơn trong số này.

Chỉ cần jQuery. :)


2

Có một cách giải quyết cho lỗi nền animate. Ý chính này bao gồm một ví dụ về một phương pháp tô sáng đơn giản và cách sử dụng nó.

/* BEGIN jquery color */
  (function(jQuery){jQuery.each(['backgroundColor','borderBottomColor','borderLeftColor','borderRightColor','borderTopColor','color','outlineColor'],function(i,attr){jQuery.fx.step[attr]=function(fx){if(!fx.colorInit){fx.start=getColor(fx.elem,attr);fx.end=getRGB(fx.end);fx.colorInit=true;}
  fx.elem.style[attr]="rgb("+[Math.max(Math.min(parseInt((fx.pos*(fx.end[0]-fx.start[0]))+fx.start[0]),255),0),Math.max(Math.min(parseInt((fx.pos*(fx.end[1]-fx.start[1]))+fx.start[1]),255),0),Math.max(Math.min(parseInt((fx.pos*(fx.end[2]-fx.start[2]))+fx.start[2]),255),0)].join(",")+")";}});function getRGB(color){var result;if(color&&color.constructor==Array&&color.length==3)
  return color;if(result=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
  return[parseInt(result[1]),parseInt(result[2]),parseInt(result[3])];if(result=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
  return[parseFloat(result[1])*2.55,parseFloat(result[2])*2.55,parseFloat(result[3])*2.55];if(result=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
  return[parseInt(result[1],16),parseInt(result[2],16),parseInt(result[3],16)];if(result=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
  return[parseInt(result[1]+result[1],16),parseInt(result[2]+result[2],16),parseInt(result[3]+result[3],16)];if(result=/rgba\(0, 0, 0, 0\)/.exec(color))
  return colors['transparent'];return colors[jQuery.trim(color).toLowerCase()];}
  function getColor(elem,attr){var color;do{color=jQuery.curCSS(elem,attr);if(color!=''&&color!='transparent'||jQuery.nodeName(elem,"body"))
  break;attr="backgroundColor";}while(elem=elem.parentNode);return getRGB(color);};var colors={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0],transparent:[255,255,255]};})(jQuery);
  /* END jquery color */


  /* BEGIN highlight */
  jQuery(function() {
    $.fn.highlight = function(options) {
      options = (options) ? options : {start_color:"#ff0",end_color:"#fff",delay:1500};
      $(this).each(function() {
        $(this).stop().css({"background-color":options.start_color}).animate({"background-color":options.end_color},options.delay);
      });
    }
  });
  /* END highlight */

  /* BEGIN highlight example */
  $(".some-elements").highlight();
  /* END highlight example */

https://gist.github.com/1068231


2

Nếu bao gồm một thư viện quá mức cần thiết thì đây là một giải pháp được đảm bảo để làm việc.

$('div').click(function() {
    $(this).css('background-color','#FFFFCC');
    setTimeout(function() { $(this).fadeOut('slow').fadeIn('slow'); } , 1000); 
    setTimeout(function() { $(this).css('background-color','#FFFFFF'); } , 1000); 
});
  1. Thiết lập kích hoạt sự kiện

  2. Đặt màu nền của phần tử khối

  3. Bên trong setTimeout sử dụng fadeOut và fadeIn để tạo hiệu ứng hoạt hình nhỏ.

  4. Bên trong setTimeout thứ hai đặt lại màu nền mặc định

    Đã thử nghiệm trong một vài trình duyệt và nó hoạt động độc đáo.


2

Thật không may, câu trả lời hàng đầu yêu cầu JQuery UI. http://api.jquery.com/animate/

Đây là một giải pháp JQuery vanilla

http://jsfiddle.net/EfKBg/

Mã não

var flash = "<div class='flash'></div>";
$(".hello").prepend(flash);
$('.flash').show().fadeOut('slow');

CSS

.flash {
    background-color: yellow;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

HTML

<div class="hello">Hello World!</div>

Nếu bạn chỉ tạo flashmột đối tượng jQuery, nó hoạt động tốt. var flash = $("<div class='flash'></div>"); $(".hello").prepend(flash); flash.show().fadeOut('slow');
Michael Blackburn

1

Đây là một phiên bản cải tiến của giải pháp colbeerhey. Tôi đã thêm một câu lệnh return để ở dạng jQuery thực sự, chúng ta sẽ xâu chuỗi các sự kiện sau khi gọi hoạt hình. Tôi cũng đã thêm các đối số để xóa hàng đợi và nhảy đến cuối của một hình ảnh động.

// Adds a highlight effect
$.fn.animateHighlight = function(highlightColor, duration) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    this.stop(true,true);
    var originalBg = this.css("backgroundColor");
    return this.css("background-color", highlightBg).animate({backgroundColor: originalBg}, animateMs);
};

lưu ý: hoạt hình màu nền yêu cầu sử dụng plugin UI màu. xem: api.jquery.com/animate
Martlark

1

Cái này sẽ thay đổi màu nền của một phần tử cho đến khi sự kiện di chuột được kích hoạt

$.fn.pulseNotify = function(color, duration) {

var This = $(this);
console.log(This);

var pulseColor = color || "#337";
var pulseTime = duration || 3000;
var origBg = This.css("background-color");
var stop = false;

This.bind('mouseover.flashPulse', function() {
    stop = true;
    This.stop();
    This.unbind('mouseover.flashPulse');
    This.css('background-color', origBg);
})

function loop() {
    console.log(This);
    if( !stop ) {
        This.animate({backgroundColor: pulseColor}, pulseTime/3, function(){
            This.animate({backgroundColor: origBg}, (pulseTime/3)*2, 'easeInCirc', loop);
        });
    }
}

loop();

return This;
}

1

Kết hợp điều này với tất cả những điều trên - một giải pháp dễ dàng để flash một phần tử và quay lại bgcolour ban đầu ...

$.fn.flash = function (highlightColor, duration, iterations) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    var originalBg = this.css('backgroundColor');
    var flashString = 'this';
    for (var i = 0; i < iterations; i++) {
        flashString = flashString + '.animate({ backgroundColor: highlightBg }, animateMs).animate({ backgroundColor: originalBg }, animateMs)';
    }
    eval(flashString);
}

Sử dụng như thế này:

$('<some element>').flash('#ffffc0', 1000, 3);

Hi vọng điêu nay co ich!


Coi chừng tà ác eval!
Birla

Tôi biết, tôi chỉ cần một giải pháp nhanh chóng và bẩn thỉu. Eval đôi khi sử dụng nó!
Duncan

1

Đây là một giải pháp sử dụng kết hợp các hình ảnh động jQuery và CSS3.

http://jsfiddle.net/padfv0u9/2/

Về cơ bản, bạn bắt đầu bằng cách thay đổi màu thành màu "flash" của bạn, sau đó sử dụng hoạt hình CSS3 để cho màu sắc mờ dần. Bạn cần thay đổi thời lượng chuyển đổi để "flash" ban đầu nhanh hơn độ mờ.

$(element).removeClass("transition-duration-medium");
$(element).addClass("transition-duration-instant");
$(element).addClass("ko-flash");
setTimeout(function () {
    $(element).removeClass("transition-duration-instant");
    $(element).addClass("transition-duration-medium");
    $(element).removeClass("ko-flash");
}, 500);

Trong đó các lớp CSS như sau.

.ko-flash {
    background-color: yellow;
}
.transition-duration-instant {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}
.transition-duration-medium {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}


1

Điều này đủ chung chung để bạn có thể viết bất kỳ mã nào bạn muốn để tạo hiệu ứng. Bạn thậm chí có thể giảm độ trễ từ 300ms xuống 33ms và làm mờ dần màu sắc, v.v.

// Flash linked to hash.
var hash = location.hash.substr(1);
if (hash) {
    hash = $("#" + hash);
    var color = hash.css("color"), count = 1;
    function hashFade () {
        if (++count < 7) setTimeout(hashFade, 300);
        hash.css("color", count % 2 ? color : "red");
    }
    hashFade();
}

1

bạn có thể sử dụng plugin jquery Pulsate để buộc tập trung sự chú ý vào bất kỳ yếu tố html nào với khả năng kiểm soát tốc độ, lặp lại và màu sắc.

JQuery.pulsate () * với Bản trình diễn

khởi tạo mẫu:

  • $ (". Pulse4"). pulsate ({speed: 2500})
  • $ (". Nút CommandBox: hiển thị"). Pulsate ({color: "# f00", tốc độ: 200, đạt: 85, lặp lại: 15})
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.