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?

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

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

function go1() { $("#demo1").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100)}

function go2() { $('#demo2').delay(100).fadeOut().fadeIn('slow') }

#demo1,
#demo2 {
  text-align: center;
  font-family: Helvetica;
  background: IndianRed;
  height: 50px;
  line-height: 50px;
  width: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="go1()">Click Me</button>
<div id='demo1'>My Element</div>
<br>
<button onclick="go2()">Click Me</button> (from comment)
<div id='demo2'>My Element</div>

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

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

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

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

Jika Anda menggunakan jQueryUI, ada pulsatefungsi diUI/Effects

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

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

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

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

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

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

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

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!

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.

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 .

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

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)

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

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.  

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

$("#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. :)

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

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.

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>

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

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

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!

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

berikan saja elem.fadeOut (10) .fadeIn (10);

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

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