คุณสร้างองค์ประกอบ“ แฟลช” ใน jQuery ได้อย่างไร


249

ฉันใหม่เอี่ยมสำหรับ jQuery และมีประสบการณ์ในการใช้ Prototype ในต้นแบบมีวิธีการ "แฟลช" องค์ประกอบ - คือ ไฮไลต์สั้น ๆ เป็นสีอื่นและให้มันกลับมาเป็นปกติเพื่อให้ดวงตาของผู้ใช้ถูกดึงดูดเข้าหา มีวิธีการดังกล่าวใน jQuery หรือไม่? ฉันเห็น fadeIn, fadeOut และเคลื่อนไหว แต่ฉันไม่เห็นอะไรอย่าง "แฟลช" บางทีหนึ่งในสามเหล่านี้สามารถใช้กับอินพุตที่เหมาะสม?


4
สิ่งนี้ไม่ได้ตอบ OP แต่รหัส (ทดสอบอย่างหลวม ๆ ) อาจเป็นประโยชน์ต่อผู้ค้นหา google ในอนาคต (เช่นตัวฉันเอง):$.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
เพิ่ม CSS นี้ให้กับองค์ประกอบ: text-decoration:blinkจากนั้นลบออก
Dementic


ฉันวางการสาธิต JSFiddle ที่นี่ซึ่งฉันคิดว่าเป็นคำตอบที่ดีกว่าที่พบในหน้านี้: stackoverflow.com/a/52283660/470749
Ryan

โปรดทราบว่าการกะพริบถูกเลิกใช้อย่างเป็นทางการเนื่องจากเป็นภาพเคลื่อนไหว ตรวจสอบได้ที่: w3.org/TR/2019/CR-css-text-decor-3-20190813/#valdef-text-decoration-line-blink
OrizG

คำตอบ:


318

ทางของฉันคือ. fadein, .fadeout .fadein, .fadeout ......

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


14
ไม่ใช่โซลูชันที่สวยที่สุด แต่สั้นเข้าใจง่ายและไม่ต้องการ UI / เอฟเฟกต์ ดี!
Chris Jaynes

21
ฉันใช้ความล่าช้าก่อน fadeIn ลำดับ fadeOut บางอย่างเช่น $('..').delay(100).fadeOut().fadeIn('slow')
alexandru.topliceanu

1
พื้นหลังที่กระพริบมักดูไม่มีรสนิยมหรือเพียงแค่สั่นสะเทือนโดยเฉพาะอย่างยิ่งหากรายการที่คุณกำลังกะพริบกำลังนั่งอยู่บนพื้นหลังสีขาว ลองทำสิ่งนี้ก่อนที่จะเพิ่มปลั๊กอินสีและพยายามแฟลชพื้นหลัง ฯลฯ
Simon_Weaver

4
ปัญหาของวิธีนี้คือเหตุการณ์เหล่านี้อาจเกิดขึ้นซึ่งกันและกัน คุณควรใส่แต่ละ fadeIn ที่ตามมาและ fadeOut ในการโทรกลับตามลำดับ ตัวอย่างเช่น: var $someElement = $("#someElement"); $someElement.fadeIn(100, function(){ $someElement.fadeOut(100, function(){ /*...etc...*/ }) })
thekingoftruth

ระวังการใช้สิ่งนี้ในรหัสการตรวจสอบที่อาจถูกเรียกบ่อยๆ ถ้ารหัสเรียกว่ามีเวลาที่เหมาะสมที่คุณอาจลมกับองค์ประกอบการแสดงเมื่อมันไม่ควร (หรือกลับกัน)
คริส Pfohl

122

คุณสามารถใช้ปลั๊กอิน jQuery สี

ตัวอย่างเช่นเพื่อดึงดูดความสนใจให้กับ divs ทั้งหมดในหน้าของคุณคุณสามารถใช้รหัสต่อไปนี้:

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

แก้ไข - ใหม่และปรับปรุง

ต่อไปนี้ใช้เทคนิคเดียวกับข้างต้น แต่มีประโยชน์เพิ่มเติมของ:

  • สีและระยะเวลาไฮไลต์ที่กำหนดพารามิเตอร์
  • รักษาสีพื้นหลังดั้งเดิมแทนที่จะสมมติว่าเป็นสีขาว
  • เป็นส่วนขยายของ jQuery เพื่อให้คุณสามารถใช้กับวัตถุใด ๆ

ขยาย jQuery Object:

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

ตัวอย่างการใช้งาน:

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

4
ไม่ได้ผลสำหรับฉันเช่นกัน - คุณแน่ใจหรือไม่ว่านี่ไม่ได้ใช้ปลั๊กอินภาพเคลื่อนไหวสี plugins.jquery.com/project/color
UpTheCreek

18
จาก jquery docs เมื่อ. animate (): คุณสมบัติภาพเคลื่อนไหวทั้งหมดควรเป็นค่าตัวเลขเดียว (ยกเว้นตามที่ระบุไว้ด้านล่าง); คุณสมบัติที่ไม่ใช่ตัวเลขไม่สามารถเคลื่อนไหวได้โดยใช้ฟังก์ชัน jQuery พื้นฐาน (ตัวอย่างเช่นความกว้างความสูงหรือด้านซ้ายสามารถเคลื่อนไหวได้ แต่สีพื้นหลังไม่สามารถเป็นได้)ดังนั้นฉันเดาว่าคุณกำลังใช้ปลั๊กอินโดยไม่ทราบว่าเป็นเช่นนั้น
UpTheCreek

4
ฉันสังเกตว่ามันไม่ได้ส่งคืนวัตถุ ฉันพยายามซ้อนเอฟเฟกต์เล็กน้อย (EG: $ ("# qtyonhand"). animateHighlight ("# c3d69b", 1500) .elelay (1500) .animateHighlight ("# 76923C", 5000);) และได้รับข้อผิดพลาด ฉันต้องการเพิ่ม "return this;" ไปยังจุดสิ้นสุดของวิธีการ
Sage

2
เอกสาร jQuery อย่างเป็นทางการกล่าวว่าคุณต้องใช้ปลั๊กอิน jQuery.Color () เพื่อให้ทำงาน: github.com/jquery/jquery-color
jchook

3
จาก jquery .animate docs: Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated.- หากคุณต้องการทำให้สีเคลื่อนไหวคุณต้อง jQuery UI หรือปลั๊กอินอื่น ๆ
Adam Tomat

101

คุณสามารถใช้ภาพเคลื่อนไหว css3 เพื่อแฟลชองค์ประกอบ

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

และคุณ jQuery เพื่อเพิ่มชั้นเรียน

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

วิธีแก้ปัญหาที่ดีถ้ามันต้องทำงานเพียงครั้งเดียว หลังจากเพิ่มคลาสแล้วการเพิ่มคลาสจะไม่ส่งผลให้องค์ประกอบกระพริบ
simon

7
ความคิดที่ดีที่สุดตลอดกาล ฉันใช้ settimeout เพื่อลบคลาส 2 วินาทีหลังจากเอฟเฟกต์
insign

6
นี่คือตัวอย่างของการลบชั้นเรียนหลังจากที่ทำแอนิเมชั่นเสร็จแล้วเพื่อให้คุณสามารถกระพริบได้ jsfiddle.net/daCrosby/eTcXX/1
DACrosby

เยี่ยมมากใช้งานได้ แต่โปรดทราบว่าคุณสมบัติที่ถูกต้องสำหรับสีพื้นหลังคือ 'โปร่งใส' แทนที่จะเป็น 'ไม่มี' หากคุณต้องการผ่านเครื่องมือตรวจสอบสไตล์ชีท
Jan M

1
โปรดทราบว่าขณะนี้เบราว์เซอร์ที่ทันสมัยทุกรุ่นรองรับกฎ@keyframesและanimationกฎทั่วไปดังนั้นจึงไม่จำเป็นต้องใช้รุ่นที่มีคำนำหน้านอกจากนี้อาจ -webkit- (สำหรับเบราว์เซอร์ Blackberry)
coredumperror

75

หลังจาก 5 ปี ... (และไม่จำเป็นต้องมีปลั๊กอินเพิ่มเติม)

อันนี้ "พัลส์" เป็นสีที่คุณต้องการ (เช่นสีขาว) โดยการใส่สีพื้นหลังของ divไว้ข้างหลังแล้วจางวัตถุออกมา

วัตถุHTML (ปุ่มเช่น):

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

jQuery (วานิลลาไม่มีปลั๊กอินอื่น ๆ ):

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

องค์ประกอบ - ชื่อคลาส

หมายเลขแรกในfadeTo()- มิลลิวินาทีสำหรับการเปลี่ยนแปลง

หมายเลขที่สองในfadeTo()- ความทึบของวัตถุหลังจากจาง / คลาย

คุณสามารถตรวจสอบเรื่องนี้ได้ที่มุมล่างขวาของหน้าเว็บนี้: https://single.majlovesreg.one/v1/

แก้ไข (willsteel) ไม่มีตัวเลือกที่ซ้ำกันโดยใช้ $ (สิ่งนี้) และค่า tweaked เพื่อดำเนินการแฟลชโดยอัตโนมัติ (ตามที่ OP ร้องขอ)


60
fadeTo(0000)- Metallica
Raven vulcan

2
เนียนเหมือนเนย! ทางออกที่ดีที่สุดของทั้งหมด ขอบคุณ!
ColdTuna

1
ทำอย่างไรไม่มีที่สิ้นสุดนี้?
tomexsans

1
ลิงก์ตัวอย่างเสียหาย
meshy

2
@tomexsans $.fn.flashUnlimited=function(){$(this).fadeTo('medium',0.3,function(){$(this).fadeTo('medium',1.0,$(this).flashUnlimited);});}จากนั้นคุณสามารถเรียกมันว่า$('#mydiv').flashUnlimited();- มันทำในสิ่งที่ Majal ตอบไว้ข้างต้นและเรียกตัวเองอีกครั้งเมื่อสิ้นสุดรอบ
Jay Dadhania

46

คุณสามารถใช้เอฟเฟกต์ไฮไลท์ใน jQuery UI เพื่อให้ได้เหมือนกันฉันเดา


8
นั่นเป็นส่วนหนึ่งของ jQueryUI ซึ่งค่อนข้างหนักไม่ใช่ส่วนหนึ่งของ jQuery Library มาตรฐาน (แม้ว่าคุณจะสามารถใช้ UI เอฟเฟกต์คอร์ซึ่งมันต้องพึ่งพา)
UpTheCreek

3
คุณสามารถดาวน์โหลดเอฟเฟกต์คอร์ + เอฟเฟกต์ที่คุณต้องการซึ่งสำหรับ "ไฮไลต์" + "พูเลท" จำนวน 12 KB ไม่เบาเลย แต่ก็ไม่หนักมาก
Roman Starkov

45

หากคุณใช้ jQueryUI จะมีpulsateฟังก์ชั่นUI/Effects

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

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


1
@DavidYell เปิดคำถามใหม่และโพสต์โค้ดตัวอย่างบางส่วน pulsateทำงานได้ดีใน Chrome
SooDesuNe

กะพริบทุก ๆ 5 วินาที: setInterval (function () {$ (". red-flag"). เอฟเฟกต์ ("pulsate", {times: 3}, 2000);}, 5000);
Adrian P.

@ ทุกคนตอนนี้ถ้าใช้ภาพเคลื่อนไหวและ / หรือการแปลง css3? มีความสุขนะ ( แต่ยังคงฉันชอบ CSS3 เป็นหนึ่งในคำตอบอื่น ๆ )
มาร์ติน Meeser

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

1
นี่เป็นเพียงความเรียบง่ายและสง่างาม
Gra

ในขณะที่ใช้fadeInและfadeOutส่งผลกระทบต่อองค์ประกอบพี่น้องอื่น ๆ เพราะมันสลับdisplayคุณสมบัติCSS ดูแปลกในกรณีของฉัน แต่อันนี้แก้ปัญหาได้แล้ว ขอบคุณมันใช้งานได้ดีอย่างมีเสน่ห์
fsevenm

15

คุณสามารถใช้ปลั๊กอินนี้ (วางไว้ในไฟล์ js และใช้ผ่านทางสคริปต์แท็ก)

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

จากนั้นใช้สิ่งนี้:

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

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

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

}

นี่เป็นการเพิ่มวิธี 'แฟลช' ให้กับวัตถุ jQuery ทั้งหมด:

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

12

คุณสามารถขยายวิธีการของ Desheng Li ให้ไกลยิ่งขึ้นได้โดยอนุญาตให้การนับซ้ำทำแฟลชหลาย ๆ ครั้งดังนี้:

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

จากนั้นคุณสามารถเรียกวิธีด้วยเวลาและจำนวนครั้งของการกะพริบ:

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

เปลี่ยนเป็นvar iterationDuration = Math.floor(duration / iterations);เพื่อให้คุณสามารถหารด้วยตัวเลขคี่และทำให้มันreturn this;เพื่อให้คุณสามารถเชื่อมโยงวิธีการอื่น ๆ หลังจากนั้น
user1477388

มันไม่ได้เปลี่ยนสีของสิ่งใด
คืน

12

วิธีการแก้ปัญหา jQuery บริสุทธิ์

(ไม่จำเป็นต้องมี jquery-ui / animate / color)

หากสิ่งที่คุณต้องการคือเอฟเฟกต์ "แฟลช" สีเหลืองโดยไม่โหลดสี 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)
};

สคริปต์ด้านบนทำเพียงแค่เฟดเดอร์สีเหลือง 1s ที่สมบูรณ์แบบสำหรับการแจ้งให้ผู้ใช้ทราบว่าองค์ประกอบนั้นได้รับการอัปเดตหรือคล้ายกัน

การใช้งาน:

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

รักวิธีแก้ปัญหานี้ยกเว้นพื้นหลังจะไม่กลับไปเป็นเหมือนเดิมอีกต่อไป
MrPHP

7

นี่อาจเป็นคำตอบที่ใหม่กว่าและสั้นกว่าเนื่องจากมีการรวบรวมสิ่งต่างๆตั้งแต่โพสต์นี้ ต้องใช้jQuery UI-ผลกระทบไฮไลท์

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

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


7

คำตอบที่ง่ายจริงๆแล้วล่ะ?

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

กระพริบสองครั้ง ... นั่นคือคนทั้งหมด!


ที่ไม่ได้กระพริบตาในสีอื่น (ซึ่งได้รับการร้องขอ) นี้เพียงแค่จางหายทึบในและนอก
Tim Eckel

6

ฉันไม่อยากเชื่อเลยว่าไม่ได้อยู่ในคำถามนี้ สิ่งที่คุณต้องทำ:

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

สิ่งนี้ทำในสิ่งที่คุณต้องการให้ทำได้ง่ายสุด ๆ ใช้ได้ทั้งshow()กับhide()วิธีการ


15
หมายเหตุ: เพื่อให้ใช้งานได้คุณต้องเพิ่มเอฟเฟกต์ jquery ui ไม่ใช่ส่วนหลักของ jQuery
travis-146

6

จะ ผลชีพจร(ออฟไลน์) ปลั๊กอิน JQuery เหมาะสมกับสิ่งที่คุณกำลังมองหาใช่ไหม

คุณสามารถเพิ่มระยะเวลาสำหรับ จำกัด ผลของพัลส์ในเวลา


ดังกล่าวโดยJPในความคิดเห็นที่มีตอนนี้เขา ปลั๊กอินชีพจรการปรับปรุง
ดูเขาrepo GitHub และนี่คือการสาธิต


ปลั๊กอินพัลส์ที่อัปเดตล่าสุด: james.padolsey.com/javascript/simple-pulse-plugin-for-jquery
James

การสาธิตเสียเพราะห้องสมุด js มันหมายถึงไม่ได้อยู่
PandaWood

@PandaWood ฉันได้คืนลิงก์ไปยัง repo GitHub และอัปเดตการสาธิต
VonC

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

1
เผง การควบคุมที่ง่ายและสมบูรณ์ในการจางหายไปและหายไป
pollaris

5

พบดวงจันทร์มากมายในภายหลัง แต่ถ้าใครสนใจมันดูเหมือนว่านี่เป็นวิธีที่ดีในการทำให้บางสิ่งบางอย่างพุ่งอย่างถาวร:

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

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

4

รหัสต่อไปนี้ใช้งานได้สำหรับฉัน กำหนดฟังก์ชั่น fade-in และ fade-out สองฟังก์ชั่นและใส่ไว้ในการติดต่อกลับของกันและกัน

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

ต่อไปนี้เป็นตัวควบคุมเวลาในการกะพริบ:

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

ฉันกำลังมองหาวิธีแก้ไขปัญหานี้ แต่ไม่ต้องพึ่งพา jQuery UI

นี่คือสิ่งที่ฉันคิดขึ้นมาและมันใช้ได้กับฉัน (ไม่มีปลั๊กอินเพียงแค่ Javascript และ jQuery); - ริซอที่ทำงาน - http://jsfiddle.net/CriddleCraddle/yYcaY/2/

ตั้งค่าพารามิเตอร์ CSS ปัจจุบันในไฟล์ CSS ของคุณเป็น css ปกติและสร้างคลาสใหม่ที่เพิ่งจัดการพารามิเตอร์เพื่อเปลี่ยนเช่นสีพื้นหลังและตั้งเป็น '! สำคัญ' เพื่อแทนที่พฤติกรรมเริ่มต้น แบบนี้...

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

จากนั้นใช้ฟังก์ชันด้านล่างและส่งผ่านองค์ประกอบ DOM เป็นสตริงจำนวนเต็มสำหรับจำนวนครั้งที่คุณต้องการให้แฟลชเกิดขึ้นคลาสที่คุณต้องการเปลี่ยนเป็นและจำนวนเต็มสำหรับการหน่วงเวลา

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

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

เช่น fadein / fadeout คุณสามารถใช้ภาพเคลื่อนไหว 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);

เรียบง่ายและยืดหยุ่น


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

3000 คือ 3 วินาที

จากความทึบ 1 มันจะจางไป 0.3 จากนั้นเป็น 1 และต่อไปเรื่อย ๆ

คุณสามารถเพิ่มสิ่งเหล่านี้ได้มากขึ้น

จำเป็นต้องใช้ jQuery เท่านั้น :)


2

มีวิธีแก้ไขสำหรับข้อบกพร่องพื้นหลังเคลื่อนไหว ส่วนสำคัญนี้รวมถึงตัวอย่างของวิธีการไฮไลท์อย่างง่ายและการใช้งาน

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

หากการรวมไลบรารี่เกินความจำเป็นนี่เป็นวิธีแก้ปัญหาที่รับประกันว่าจะใช้ได้

$('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. ตั้งค่าทริกเกอร์เหตุการณ์

  2. กำหนดสีพื้นหลังขององค์ประกอบบล็อก

  3. ภายใน setTimeout ใช้ fadeOut และ fadeIn เพื่อสร้างเอฟเฟกต์ภาพเคลื่อนไหวเล็กน้อย

  4. ภายใน setTimeout ที่สองรีเซ็ตสีพื้นหลังเป็นค่าเริ่มต้น

    ผ่านการทดสอบในเบราว์เซอร์บางตัวและใช้งานได้ดี


2

น่าเสียดายที่คำตอบอันดับต้นต้องใช้ JQuery UI http://api.jquery.com/animate/

นี่คือวิธีการแก้ปัญหาวานิลลา 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>

หากคุณเพิ่งสร้างflashjQuery Object มันก็ใช้ได้ดี var flash = $("<div class='flash'></div>"); $(".hello").prepend(flash); flash.show().fadeOut('slow');
Michael Blackburn

1

นี่คือโซลูชันของ colbeerhey รุ่นปรับปรุงเล็กน้อย ฉันเพิ่มคำสั่ง return เพื่อให้ในรูปแบบ jQuery จริงเราโยงเหตุการณ์หลังจากเรียกภาพเคลื่อนไหว ฉันได้เพิ่มอาร์กิวเมนต์เพื่อล้างคิวและข้ามไปยังจุดสิ้นสุดของภาพเคลื่อนไหว

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

หมายเหตุ: สีพื้นหลังของภาพเคลื่อนไหวจำเป็นต้องใช้ปลั๊กอิน UI สี ดู: api.jquery.com/animate
Martlark

1

สีนี้จะกะพริบสีพื้นหลังขององค์ประกอบจนกว่าจะมีการเรียกใช้เหตุการณ์การวางเมาส์

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

รวบรวมสิ่งเหล่านี้เข้าด้วยกันจากทั้งหมดข้างต้น - วิธีง่ายๆในการกระพริบองค์ประกอบและกลับสู่ bgcolour ดั้งเดิม ...

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

ใช้แบบนี้:

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

หวังว่านี่จะช่วยได้!


ระวังความชั่วร้ายeval!
Birla

ฉันรู้ว่าฉันต้องการวิธีแก้ปัญหาที่รวดเร็วและสกปรก Eval ใช้มันเป็นบางครั้ง!
Duncan

1

นี่คือโซลูชันที่ใช้ภาพเคลื่อนไหว jQuery และ CSS3 ผสมผสานกัน

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

โดยพื้นฐานแล้วคุณเริ่มต้นด้วยการเปลี่ยนสีเป็นสี "แฟลช" ของคุณจากนั้นใช้ภาพเคลื่อนไหว CSS3 เพื่อให้สีจางหายไป คุณต้องเปลี่ยนระยะเวลาการเปลี่ยนแปลงเพื่อให้ "แฟลช" เริ่มต้นเร็วกว่าเฟด

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

โดยที่คลาส CSS มีดังต่อไปนี้

.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

นี่เป็นเรื่องธรรมดามากพอที่คุณจะเขียนโค้ดอะไรก็ได้ที่คุณชอบให้เคลื่อนไหว คุณสามารถลดการหน่วงเวลาจาก 300ms เป็น 33ms และจางสี ฯลฯ

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

คุณสามารถใช้ปลั๊กอิน jquery Pulsate เพื่อบังคับให้ความสนใจกับองค์ประกอบ html ใด ๆ ที่มีการควบคุมความเร็วและการทำซ้ำและสี

JQuery.pulsate () * พร้อมการสาธิต

ตัวอย่าง initializer:

  • $ (". pulse4" ) เต้น ({ความเร็ว 2500}).
  • $ (". ปุ่ม CommandBox: มองเห็นได้"). pulsate ({color: "# f00", ความเร็ว: 200, ถึง: 85, ทำซ้ำ: 15})
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.