Як зробити елемент «спалах» у jQuery


249

Я абсолютно новий в jQuery і маю певний досвід використання прототипу. У прототипі є метод "спалаху" елемента - тобто. коротко виділіть його іншим кольором і поверніть його до нормального стану, щоб привернути до нього погляд користувача. Чи є такий метод у jQuery? Я бачу fadeIn, fadeOut та анімацію, але нічого подібного не бачу "спалаху". Можливо, один із цих трьох можна використовувати з відповідними входами?


4
Це не відповідає ОП, але (слабко перевірений) код може бути корисним майбутнім шукачам 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а потім видаліть його.
Дементік


Я розміщую тут демонстрацію 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
Не найкрасивіше рішення, але коротке, просте для розуміння та не вимагає користувальницького інтерфейсу / ефектів. Приємно!
Кріс Джейнес

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

Остерігайтеся використовувати це в коді перевірки, який може викликатися часто. Якщо код викликається правильним часом, ви можете виявити елемент, який показує, коли він не повинен (або навпаки)
Chris Pfohl

122

Ви можете використовувати плагін jQuery Color .

Наприклад, щоб звернути увагу на всі диви на вашій сторінці, ви можете використовувати такий код:

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

Редагувати - Нове та вдосконалене

У наступному використовується та сама техніка, що і вище, але вона має додаткові переваги:

  • параметризований колір і тривалість виділення
  • зберігши початковий колір фону, замість того, щоб вважати, що він білий
  • будучи розширенням jQuery, тому ви можете використовувати його на будь-якому об'єкті

Розгорніть об’єкт 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);
    }
};

Приклад використання:

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

4
Не працює і для мене - ви впевнені, що це не покладається на плагін кольорової анімації? plugins.jquery.com/project/color
UpTheCreek

18
З документів jquery на .animate (): усі анімовані властивості мають бути єдиним числовим значенням (за винятком зазначеного нижче); властивості, які не є числовими, неможливо анімувати за допомогою базових функцій jQuery. (Наприклад, ширину, висоту чи ліворуч можна анімувати, але кольором тла не може бути.) Тож я думаю, ви використовуєте плагін, не усвідомлюючи цього.
UpTheCreek

4
Я помітив, що він не повертав об'єкт. Я спробував скласти цей маленький ефект (EG: $ ("# qtyonhand"). AnimateHighlight ("# c3d69b", 1500) .delay (1500) .animateHighlight ("# 76923C", 5000);) і отримав помилку. Мені потрібно було додати "повернути це"; до кінця методу.
Мудрець

2
Офіційні документи jQuery кажуть, що для цього потрібно використовувати плагін jQuery.Color (): github.com/jquery/jquery-color
jchook

3
З документів jquery .animate: Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated.- Якщо ви хочете анімувати кольори, вам потрібен інтерфейс jQuery або інший плагін.
Адам Томат

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
Найкраща ідея коли-небудь. Я використав час встановлення, щоб вилучити клас через 2 секунди після ефекту
подати заяву

6
Ось приклад видалення класу після того, як анімація виконана, щоб ви могли продовжувати мигати. jsfiddle.net/daCrosby/eTcXX/1
DACrosby

Чудово, що це працює, але зауважте, що правильна властивість кольору фону є "прозорою" замість "жодної", якщо ви хочете пройти валідатор аркуша стилів.
січень M

1
Зауважте, що всі сучасні браузери зараз підтримують регулярні @keyframesта animationправила, тому немає необхідності використовувати додаткові версії, крім можливо -webkit- (для браузера Blackberry).
coredumperror

75

Через 5 років ... (І додатковий плагін не потрібен)

Цей "імпульсує" його до потрібного кольору (наприклад, білого), поставивши за ним колір фонового кольору, а потім вицвітання об'єкта і знову.

Об'єкт 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) жодний дублюючий селектор, використовуючи $ (this) та налаштовані значення, щоб акуратно виконати спалах (як вимагає ОП).


60
fadeTo(0000)- Metallica
вулкан ворон

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();- це те, на що відповів Маджал вище, і знову називає себе в кінці циклу.
Джей

46

Ви можете використовувати ефект виділення в інтерфейсі jQuery, щоб досягти того ж, я думаю.


8
Це частина jQueryUI, яка досить важка, не є частиною стандартної бібліотеки jQuery (хоча ви можете просто використовувати ядро ​​ефектів інтерфейсу, на яке вона покладається).
UpTheCreek

3
Ви можете завантажити лише ядро ​​ефектів + ​​потрібний ефект, який для "виділення" + "пульсації" становить 12 КБ. Не зовсім легкий, але і не такий важкий.
Роман Старков

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 секунд: встановіть Interval (функція () {$ (". Червоний прапор"). Ефект ("пульсує", {раз: 3}, 2000);}, 5000);
Адріан П.

@all Хтось зараз, якщо він використовує css3 анімацію та / або перетворення? Добре все одно (але все ж я віддаю перевагу css3, як і в одній з інших відповідей)
Мартін Мізер

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

1
Це просто просто і елегантно.
Гра

Хоча використання 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 );

}

Це додає метод "flash" для всіх об'єктів jQuery:

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

12

Ви можете продовжити метод Дешенга Лі далі, дозволяючи ітераціям робити кілька спалахів так:

// 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;так, щоб ви могли ланцюжок інших методів після нього.
користувач1477388

Це дійсно не змінює колір нічого, хоча?
ночі

12

Чисте рішення jQuery.

(не потрібні jquery-ui / animi / 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)

Двічі блимає ... це все люди!


Це не блимає іншим кольором (про що вимагали), це просто згасає непрозорість усередині і зовні.
Тім Еккель

6

Я не можу повірити, що це ще не з цього питання. Все, що вам потрібно зробити:

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

Це робить саме те, що ви хочете, це робиться, дуже просто, працює як для методів, так show()і для hide()методів.


15
Примітка: для цього вам потрібно додати ефекти jquery ui. це не частина core jQuery
travis-146

6

Буде a імпульсний ефект(офлайн) плагін JQuery відповідати тому, що ви шукаєте?

Ви можете додати тривалість для обмеження ефекту пульсу в часі.


Як згадував JP в коментарях, зараз є його оновлений імпульсний плагін .
Подивіться його репо в GitHub . І ось демонстрація .


Оновлений імпульсний плагін: james.padolsey.com/javascript/simple-pulse-plugin-for-jquery
Джеймс

Демонстрація зламана, тому що бібліотека js, на яку вона посилається, не існує
PandaWood

@PandaWood Я відновив посилання на репортаж 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

Наступні коди працюють для мене. Визначте дві функції зникнення та зникнення та помістіть їх у зворотний виклик один одного.

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.

Це те, що я придумав, і це працює для мене (немає плагінів, лише 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 у якості рядка, ціле число, скільки разів ви хочете, щоб спалах стався, клас, який ви хочете змінити, і ціле число для затримки.

Примітка: Якщо ви передасте парне число для змінної 'times', ви закінчите клас, з якого ви почали, і якщо ви перейдете непарне число, ви отримаєте переключений клас. Обидва корисні для різних речей. Я використовую "я", щоб змінити час затримки, інакше вони б одночасно стріляли, і ефект був би втрачений.

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

Якщо ви просто зробите flashоб’єкт jQuery, він прекрасно працює. var flash = $("<div class='flash'></div>"); $(".hello").prepend(flash); flash.show().fadeOut('slow');
Майкл Блекберн

1

Ось дещо вдосконалена версія рішення Colbeerhey. Я додав твердження про повернення, щоб у вірній формі 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 є його використання іноді!
Дункан

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

Це досить загально, що ви можете писати будь-який код, який ви хочете анімувати. Ви навіть можете зменшити затримку з 300 мс до 33 мс і в’янути кольори тощо.

// 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 () * з демонстрацією

зразок ініціалізатора:

  • $ (". pulse4"). pulsate ({швидкість: 2500})
  • $ (". Кнопка CommandBox: видно"). Пульсує ({color: "# f00", швидкість: 200, охоплення: 85, повтор: 15})
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.