Bagaimana Anda membuat elemen "flash" di jQuery


249

Saya baru mengenal jQuery dan memiliki pengalaman menggunakan Prototype. Dalam Prototipe, ada metode untuk "flash" elemen - yaitu. sorot sebentar dalam warna lain dan minta agar kembali normal sehingga mata pengguna tertarik padanya. Apakah ada metode seperti itu di jQuery? Saya melihat fadeIn, fadeOut, dan animate, tapi saya tidak melihat apa pun seperti "flash". Mungkin salah satu dari ketiganya dapat digunakan dengan input yang sesuai?


4
Ini tidak menjawab OP, tetapi kode (yang diuji secara longgar) mungkin berguna bagi pencari google di masa mendatang (seperti saya):$.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

3
tambahkan css ini ke elemen:, text-decoration:blinklalu hapus.
Demensik


Saya menempatkan demo JSFiddle di sini yang menurut saya merupakan jawaban yang lebih baik daripada yang saya temukan di halaman ini: stackoverflow.com/a/52283660/470749
Ryan

Harap perhatikan bahwa blink secara resmi tidak digunakan lagi karena alasan animasi. Periksa di: w3.org/TR/2019/CR-css-text-decor-3-20190813/#valdef-text-decoration-line-blink
OrizG

Jawaban:


318

Cara saya adalah .fadein, .fadeout .fadein, .fadeout ......

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


14
Bukan solusi yang paling indah, tetapi singkat, mudah dimengerti, dan tidak memerlukan UI / efek. Bagus!
Chris Jaynes

21
saya menggunakan penundaan sebelum urutan fadeIn, fadeOut, sesuatu seperti $('..').delay(100).fadeOut().fadeIn('slow')
alexandru.topliceanu

1
latar belakang berkedip sering terlihat norak, atau hanya menggelegar biasa - terutama jika item yang Anda berkedip sedang duduk di latar belakang putih polos. coba ini terlebih dahulu sebelum menambahkan plugin warna dan mencoba untuk
mem

4
Masalah dengan metode ini adalah peristiwa ini berpotensi saling menginjak. Anda mungkin harus meletakkan setiap fadeIn dan fadeOut berikutnya dalam panggilan balik masing-masing. Misalnya: var $someElement = $("#someElement"); $someElement.fadeIn(100, function(){ $someElement.fadeOut(100, function(){ /*...etc...*/ }) })
thekingoftruth

Hati-hati menggunakan ini dalam kode validasi yang mungkin sering dipanggil. Jika kode dipanggil dengan waktu yang tepat Anda mungkin berakhir dengan elemen yang menunjukkan kapan seharusnya tidak (atau sebaliknya)
Chris Pfohl

122

Anda dapat menggunakan plugin jQuery Color .

Misalnya, untuk menarik perhatian semua div di halaman Anda, Anda bisa menggunakan kode berikut:

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

Edit - Baru dan ditingkatkan

Berikut ini menggunakan teknik yang sama seperti di atas, tetapi memiliki manfaat tambahan:

  • warna dan durasi sorotan berparameter
  • mempertahankan warna latar belakang asli, alih-alih mengasumsikan bahwa itu putih
  • menjadi ekstensi jQuery, sehingga Anda dapat menggunakannya pada objek apa pun

Perpanjang Objek 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);
    }
};

Contoh penggunaan:

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

4
Juga tidak bekerja untuk saya - apakah Anda yakin ini tidak bergantung pada plugin animasi warna? plugins.jquery.com/project/color
UpTheCreek

18
Dari dokumen jquery di .animate (): Semua properti animasi harus berupa nilai numerik tunggal (kecuali seperti yang tercantum di bawah); properti yang non-numerik tidak dapat dianimasikan menggunakan fungsionalitas jQuery dasar. (Misalnya, lebar, tinggi, atau kiri dapat dianimasikan tetapi warna latar tidak bisa.) Jadi saya kira Anda menggunakan plugin tanpa menyadarinya.
UpTheCreek

4
Saya perhatikan itu tidak mengembalikan objek. Saya mencoba menumpuk efek kecil ini (EG: $ ("# qtyonhand"). AnimateHighlight ("# c3d69b", 1500) .delay (1500) .animateHighlight ("# 76923C", 5000);) dan mendapat kesalahan. Saya perlu menambahkan "kembalikan ini;" ke akhir metode.
Sage

2
Documents jQuery resmi mengatakan Anda harus menggunakan plugin jQuery.Color () agar ini berfungsi: github.com/jquery/jquery-color
jchook

3
Dari jquery .animate docs: Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated.- Jika Anda ingin menghidupkan warna, Anda MEMBUTUHKAN jQuery UI atau plugin lain.
Adam Tomat

101

Anda dapat menggunakan animasi CSS3 untuk mem-flash sebuah elemen

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

Dan Anda jQuery untuk menambahkan kelas

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

Solusi yang bagus, jika perlu bekerja hanya sekali. Setelah kelas telah ditambahkan, selanjutnya menambahkan kelas tidak (secara logis) tidak menghasilkan flashing elemen.
simon

7
Ide terbaik yang pernah ada. Saya menggunakan settimeout untuk menghapus kelas 2 detik setelah efek
insign

6
Berikut adalah contoh menghapus kelas setelah animasi selesai sehingga Anda dapat terus menginstalnya. jsfiddle.net/daCrosby/eTcXX/1
DACrosby

Bagus, itu berfungsi, tetapi perhatikan bahwa properti yang benar untuk warna latar belakang adalah 'transparan' alih-alih 'tidak ada' jika Anda ingin meneruskan validator style sheet.
Jan M

1
Perhatikan bahwa semua browser modern sekarang mendukung reguler @keyframesdan animationaturan, sehingga tidak perlu untuk menggunakan versi diawali selain mungkin -webkit- (untuk browser Blackberry).
coredumperror

75

Setelah 5 tahun ... (Dan tidak diperlukan plugin tambahan)

Ini "pulsa" ke warna yang Anda inginkan (misalnya putih) dengan meletakkan warna latar belakang div di belakangnya , dan kemudian memudar objek keluar dan masuk lagi.

Objek HTML (mis. Tombol):

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

jQuery (vanilla, tidak ada plugin lain):

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

elemen - nama kelas

angka pertama dalam fadeTo()milidetik untuk transisi

angka kedua dalam fadeTo()opacity objek setelah fade / unfade

Anda dapat memeriksanya di sudut kanan bawah halaman web ini: https://single.majlovesreg.one/v1/

Edit (willsteel) tidak ada pemilih duplikat dengan menggunakan $ (ini) dan nilai tweak untuk secara akut melakukan flash (seperti yang diminta OP).


60
fadeTo(0000)- Metallica
gagak vulcan

2
Mulus seperti mentega! Solusi terbaik dari semuanya. Terima kasih!
ColdTuna

1
bagaimana melakukan ini tanpa batas?
tomexsans

1
Tautan contoh rusak.
menyenangkan

2
@tomexsans $.fn.flashUnlimited=function(){$(this).fadeTo('medium',0.3,function(){$(this).fadeTo('medium',1.0,$(this).flashUnlimited);});}Anda kemudian dapat menyebutnya seperti $('#mydiv').flashUnlimited();- Ini melakukan apa yang dijawab Majal di atas, dan menyebut dirinya kembali di akhir siklus.
Jay Dadhania

46

Anda bisa menggunakan efek highlight di jQuery UI untuk mencapai hal yang sama, saya kira.


8
Itu bagian dari jQueryUI, yang cukup berat, bukan bagian dari jQuery Library standar (walaupun Anda bisa menggunakan inti efek UI, yang menjadi sandarannya).
UpTheCreek

3
Anda dapat mengunduh hanya inti efek + efek yang Anda inginkan, yang, untuk "highlight" + "pulsate" berjumlah 12 KB. Tidak sepenuhnya ringan, tapi juga tidak seberat itu.
Roman Starkov

45

Jika Anda menggunakan jQueryUI, ada pulsatefungsi diUI/Effects

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

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


1
@ Davidvid, buka pertanyaan baru dan kirim beberapa kode sampel. pulsateberfungsi dengan baik di Chrome.
SooDesuNe

Berkedip setiap 5 detik: setInterval (function () {$ (". Red-flag"). Effect ("pulsate", {times: 3}, 2000);}, 5000);
Adrian P.

@all Apakah ada yang tahu jika ini menggunakan animasi css3 dan / atau mentransformasikannya? Nice anyways (tapi tetap saja saya lebih suka CSS3 seperti dalam salah satu jawaban lain)
Martin Meeser

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

1
Ini sederhana dan elegan.
Gra

Saat menggunakan fadeIndan fadeOutmemengaruhi elemen saudara lain karena mengubah displayproperti css , terlihat aneh dalam kasus saya. Tapi yang ini memperbaiki masalahnya. Terima kasih, ini bekerja dengan elegan seperti pesona.
fsevenm

15

Anda bisa menggunakan plugin ini (memasukkannya ke file js dan menggunakannya melalui tag-tag)

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

Dan kemudian gunakan sesuatu seperti ini:

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

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

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

}

Ini menambahkan metode 'flash' ke semua objek jQuery:

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

12

Anda dapat memperluas metode Desheng Li lebih lanjut dengan memungkinkan iterasi dihitung untuk melakukan banyak flash seperti:

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

Kemudian Anda dapat memanggil metode dengan waktu dan jumlah flash:

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

Diubah var iterationDuration = Math.floor(duration / iterations);sehingga Anda bisa membaginya dengan angka ganjil dan membuatnya return this;sehingga Anda bisa membuat rantai metode lain setelahnya.
user1477388

Ini tidak benar-benar mengubah warna apa pun?
malam

12

Solusi jQuery murni.

(tidak diperlukan jquery-ui / animate / warna.)

Jika yang Anda inginkan adalah efek "flash" kuning itu tanpa memuat warna 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)
};

Skrip di atas hanya melakukan 1s yellow fadeout, sempurna untuk memberi tahu pengguna bahwa elemen telah diperbarui atau yang serupa.

Pemakaian:

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

Cintai solusi ini, kecuali latar belakangnya tidak kembali seperti
semula

7

Ini mungkin jawaban yang lebih baru, dan lebih pendek, karena beberapa hal telah dikonsolidasikan sejak posting ini. Membutuhkan jquery-ui-effect-highlight .

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

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


7

Bagaimana dengan jawaban yang sangat sederhana?

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

Berkedip dua kali ... itu saja orang!


Itu tidak berkedip dalam warna lain (yang diminta) ini hanya memudar opacity masuk dan keluar.
Tim Eckel

6

Saya tidak percaya ini belum pada pertanyaan ini. Yang harus Anda lakukan:

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

Ini melakukan persis apa yang Anda ingin lakukan, sangat mudah, bekerja untuk keduanya show()dan hide()metode.


15
Catatan: agar ini berfungsi, Anda perlu menambahkan efek jquery ui. itu bukan bagian dari jQuery inti
travis-146

6

Akan a efek pulsa(offline) Pengaya JQuery sesuai untuk apa yang Anda cari?

Anda dapat menambahkan durasi untuk membatasi efek pulsa dalam waktu.


Seperti yang disebutkan oleh JP dalam komentar, sekarang ada plugin pulse- nya yang diperbarui .
Lihat repo GitHub- nya . Dan ini demo .



Demo rusak, karena perpustakaan js yang dimaksud tidak ada
PandaWood

@PandaWood Saya telah memulihkan tautan ke repo GitHub dan memperbarui demo
VonC

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

1
Persis. Sederhana, dan kontrol penuh atas fade in dan fade out.
pollaris

5

Menemukan ini banyak bulan kemudian tetapi jika ada yang peduli, sepertinya ini adalah cara yang bagus untuk mendapatkan sesuatu untuk flash secara permanen:

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

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

4

Kode-kode berikut ini berfungsi untuk saya. Tentukan dua fungsi fade-in dan fade-out dan letakkan mereka dalam panggilan balik satu sama lain.

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

Berikut ini mengontrol waktu flash:

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

Saya sedang mencari solusi untuk masalah ini tetapi tanpa mengandalkan jQuery UI.

Inilah yang saya buat dan berfungsi untuk saya (tidak ada plugin, hanya Javascript dan jQuery); - Inilah biola yang berfungsi - http://jsfiddle.net/CriddleCraddle/yYcaY/2/

Atur parameter CSS saat ini dalam file CSS Anda sebagai css normal, dan buat kelas baru yang hanya menangani parameter untuk mengubah yaitu warna latar belakang, dan atur ke '! Penting' untuk mengganti perilaku default. seperti ini...

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

Kemudian cukup gunakan fungsi di bawah ini dan meneruskan elemen DOM sebagai string, integer untuk berapa kali Anda ingin flash terjadi, kelas yang ingin Anda ubah, dan integer untuk penundaan.

Catatan: Jika Anda memasukkan angka genap untuk variabel 'kali', Anda akan berakhir dengan kelas yang Anda mulai, dan jika Anda melewati angka ganjil Anda akan berakhir dengan kelas toggled. Keduanya berguna untuk hal yang berbeda. Saya menggunakan 'i' untuk mengubah waktu tunda, atau mereka semua akan menyala pada waktu yang sama dan efeknya akan hilang.

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

Seperti fadein / fadeout Anda bisa menggunakan animate css / delay

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

Sederhana dan fleksibel


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

3000 adalah 3 detik

Dari opacity 1 ia memudar menjadi 0,3, lalu ke 1 dan seterusnya.

Anda dapat menumpuk lebih banyak dari ini.

Hanya jQuery yang dibutuhkan. :)


2

Ada solusi untuk bug latar belakang bernyawa. Intisari ini mencakup contoh metode sorotan sederhana dan penggunaannya.

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

Jika menyertakan perpustakaan berlebihan di sini adalah solusi yang dijamin berfungsi.

$('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. Siapkan pemicu acara

  2. Atur warna latar elemen blok

  3. Di dalam setTimeout gunakan fadeOut dan fadeIn untuk membuat sedikit efek animasi.

  4. Di dalam setTimeout kedua mengatur ulang warna latar belakang default

    Diuji dalam beberapa peramban dan berfungsi dengan baik.


2

Sayangnya jawaban teratas membutuhkan JQuery UI. http://api.jquery.com/animate/

Berikut ini adalah solusi vanilla JQuery

http://jsfiddle.net/EfKBg/

JS

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>

Jika Anda hanya membuat flashObyek jQuery, itu berfungsi dengan baik. var flash = $("<div class='flash'></div>"); $(".hello").prepend(flash); flash.show().fadeOut('slow');
Michael Blackburn

1

Ini versi solusi colbeerhey yang sedikit lebih baik. Saya menambahkan pernyataan kembali sehingga, dalam bentuk jQuery yang sebenarnya, kami membuat rantai peristiwa setelah memanggil animasi. Saya juga menambahkan argumen untuk menghapus antrian dan melompat ke akhir animasi.

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

catatan: menjiwai warna latar belakang membutuhkan penggunaan plugin UI warna. lihat: api.jquery.com/animate
Martlark

1

Yang satu ini akan menggetarkan warna latar belakang elemen hingga peristiwa mouseover dipicu

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

Gabungkan ini dari semua yang di atas - solusi mudah untuk mem-flash sebuah elemen dan kembali ke bgcolour asli ...

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

Gunakan seperti ini:

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

Semoga ini membantu!


Waspadalah terhadap kejahatan eval!
Birla

Saya tahu, saya hanya butuh solusi cepat dan kotor. Eval terkadang menggunakannya!
Duncan

1

Inilah solusi yang menggunakan campuran animasi jQuery dan CSS3.

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

Pada dasarnya Anda mulai dengan mengubah warna ke warna "flash" Anda, dan kemudian menggunakan animasi CSS3 untuk membiarkan warna memudar. Anda perlu mengubah durasi transisi agar "flash" awal menjadi lebih cepat daripada fade.

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

Di mana kelas-kelas CSS adalah sebagai berikut.

.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

Ini cukup umum sehingga Anda dapat menulis kode apa pun yang ingin Anda menghidupkan. Anda bahkan dapat mengurangi penundaan dari 300 ms menjadi 33 ms dan memudar warna, dll.

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

Anda dapat menggunakan plugin jquery Pulsate untuk memaksa memfokuskan perhatian pada elemen html dengan kontrol atas kecepatan dan pengulangan dan warna.

JQuery.pulsate () * dengan Demo

penginisialisasi sampel:

  • $ (". pulse4"). pulsate ({speed: 2500})
  • $ (". Tombol CommandBox: terlihat"). Pulsate ({color: "# f00", kecepatan: 200, jangkauan: 85, ulangi: 15})
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.