Как сделать элемент «flash» в jQuery?


249

Я новичок в jQuery и имею некоторый опыт использования Prototype. В Prototype есть метод «прошить» элемент - т.е. кратко выделите его другим цветом и верните его в нормальное состояние, чтобы на него обратил взгляд пользователя. Есть ли такой метод в JQuery? Я вижу fadeIn, fadeOut и animate, но я не вижу ничего похожего на «flash». Возможно, один из этих трех может быть использован с соответствующими входами?


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); } };
Кори Моухортер

3
добавьте этот CSS к элементу:, text-decoration:blinkзатем удалите его.
Дементик


Я разместил здесь демонстрацию JSFiddle, которая, на мой взгляд, является лучшим ответом, чем я нашел на этой странице: stackoverflow.com/a/52283660/470749
Райан,

Обратите внимание, что blink официально не рекомендуется в пользу анимации. Проверьте по адресу: 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

Остерегайтесь использовать это в коде проверки, который может вызываться часто. Если код вызывается с правильной синхронизацией, вы можете получить элемент, показывающий, когда он не должен (или наоборот)
Крис Пфол

122

Вы можете использовать плагин jQuery Color .

Например, чтобы привлечь внимание ко всем элементам div на вашей странице, вы можете использовать следующий код:

$("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
Я заметил, что это не возвращает объект. Я попытался наложить этот небольшой эффект (например, $ ("# qtyonhand"). AnimateHighlight ("# c3d69b", 1500) .delay (1500) .animateHighlight ("# 76923C", 5000);) и получил ошибку. Мне нужно было добавить «вернуть это»; до конца метода.
Мудрец

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

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

Хорошее решение, если оно должно работать только один раз. После добавления класса последующее добавление класса (по логике) не приводит к перепрошивке элемента.
симон

7
Лучшая идея Я использовал settimeout, чтобы удалить класс через 2 секунды после эффекта
insign

6
Вот пример удаления класса после завершения анимации, чтобы вы могли продолжать его мигать. jsfiddle.net/daCrosby/eTcXX/1
DACrosby

Отлично, это работает, но обратите внимание, что правильное свойство для цвета фона - «прозрачный» вместо «нет», если вы хотите передать валидатор таблицы стилей.
Янв

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) без дублированного селектора, используя $ (this) и подправленные значения для точного выполнения флеш-памяти (как запрошено OP).


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

2
Гладкая как масло! Лучшее решение из всех. Спасибо!
ColdTuna

1
как сделать это бесконечным?
Tomexsans

1
Пример ссылки не работает.
сетчатых

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 секунд: setInterval (function () {$ (". Red-flag"). Effect ("pulsate", {times: 3}, 2000);}, 5000);
Адриан П.

@all Кто-нибудь сейчас использует ли css3 анимацию и / или преобразование? В любом случае, приятно (но все же я предпочитаю css3, как в одном из других ответов)
Martin Meeser

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;так, чтобы вы могли цеплять другие методы после него.
user1477388

Это не меняет цвет?
ночи

12

Чистое решение jQuery.

(не требуется JQuery-UI / анимация / цвет.)

Если все, что вам нужно, это желтый "flash" эффект без загрузки цвета 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)
};

Вышеприведенный скрипт просто выполняет 1с желтого затухания, идеально подходит для того, чтобы сообщить пользователю, что элемент был обновлен или что-то подобное.

Использование:

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

Люблю это решение, за исключением того, что фон не возвращается к тому, что было раньше
MrPHP

7

Это может быть более актуальный ответ, и он короче, так как все было несколько консолидировано после этого поста. Требуется jquery-ui-effect-highlight .

$("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. это не часть ядра jQuery
travis-146

6

Был бы импульсный эффект(оффлайн) Плагин 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 UI.

Это то, что я придумал, и это работает для меня (без плагинов, только Javascript и jQuery); - Вот рабочая скрипка - http://jsfiddle.net/CriddleCraddle/yYcaY/2/

Установите текущий параметр CSS в вашем файле CSS как обычный css, и создайте новый класс, который просто обрабатывает параметр, который нужно изменить, т.е. background-color, и установите для него значение «! Important», чтобы переопределить поведение по умолчанию. как это...

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

Затем просто используйте функцию ниже и передайте элемент DOM в виде строки, целое число для числа раз, которое вы хотите, чтобы произошла вспышка, класс, который вы хотите изменить, и целое число для задержки.

Примечание: если вы передадите четное число для переменной 'times', вы получите класс, с которого вы начали, а если вы передадите нечетное число, вы получите переключаемый класс. Оба полезны для разных вещей. Я использую '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>

Если вы просто создаете flashобъект jQuery, он работает нормально. var flash = $("<div class='flash'></div>"); $(".hello").prepend(flash); flash.show().fadeOut('slow');
Майкл Блэкберн

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 colors. см .: 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!
Бирла

Я знаю, мне просто нужно быстрое и грязное решение. 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" ) пульсировать ({скорость: 2500}).
  • $ (". Кнопка CommandBox: видимая"). Пульсировать ({цвет: "# f00", скорость: 200, охват: 85, повтор: 15})
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.