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

Мой путь - .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>

Вы можете использовать плагин 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);

Вы можете использовать анимацию 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");

Через 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).

Я думаю, вы могли бы использовать эффект выделения в пользовательском интерфейсе jQuery, чтобы добиться того же.

Если вы используете jQueryUI, есть pulsateфункция вUI/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 );

Вы можете использовать этот плагин (поместите его в файл 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 );

Вы можете расширить метод Дешенга Ли, позволив счетчику итераций делать несколько вспышек, например:

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

Чистое решение 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'))

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

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

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

Как насчет действительно простого ответа?

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

Мигает дважды ... вот и все, ребята!

Я не могу поверить, что это еще не по этому вопросу. Все, что тебе нужно сделать:

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

Это именно то , что вы хотите сделать, это просто супер, работает как show()и hide()методы.

Был бы импульсный эффект(оффлайн) Плагин JQuery подойдет для того, что вы ищете?

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

Как упомянул JP в комментариях, теперь есть его обновленный импульсный плагин .
Смотрите его репозиторий GitHub . И вот демо .

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

Обнаружил это много лун позже, но если кому-то все равно, похоже, что это хороший способ получить что-то, чтобы постоянно мигать:

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

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

Следующие коды работают для меня. Определите две функции постепенного появления и исчезновения и поместите их в обратный вызов друг друга.

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

Я искал решение этой проблемы, но не полагаясь на 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.  

Как и 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);

Простой и гибкий

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

3000 это 3 секунды

От непрозрачности 1 оно уменьшается до 0,3, затем до 1 и так далее.

Вы можете сложить больше из них.

Нужен только jQuery. :)

Существует обходной путь для ошибки фонового анимации. Эта суть включает в себя пример простого метода выделения и его использования.

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

Если включение библиотеки является излишним, вот решение, которое гарантированно сработает.

$('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 сбрасывается цвет фона по умолчанию

   Протестировано в нескольких браузерах и работает хорошо.

К сожалению, верхний ответ требует 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>

Вот немного улучшенная версия решения 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);
};

Этот будет пульсировать цвет фона элемента, пока не произойдет событие наведения мыши

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

Соберите все это вместе - простое решение для перепрошивки элемента и возврата к исходному 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);

Надеюсь это поможет!

Вот решение, которое использует сочетание анимации 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;
}

просто дайте elem.fadeOut (10) .fadeIn (10);

Это достаточно универсально, так что вы можете написать любой код для анимации. Вы даже можете уменьшить задержку с 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();
}

Вы можете использовать плагин jquery Pulsate, чтобы сосредоточить внимание на любом элементе HTML с контролем скорости, повторения и цвета.

JQuery.pulsate () ^{* с демонстрациями}

инициализатор образца:

• $ (». Pulse4" ) пульсировать ({скорость: 2500}).
• $ (". Кнопка CommandBox: видимая"). Пульсировать ({цвет: "# f00", скорость: 200, охват: 85, повтор: 15})