Как сделать элемент "flash" в jQuery

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

Ответ 1

Мой путь -.fadein,.fadeout.fadein,.fadeout......

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

Ответ 2

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

Например, чтобы привлечь внимание ко всем 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);

Ответ 3

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

Ответ 4

Через 5 лет... (и никаких дополнительных плагинов не требуется)

Он "пульсирует" его до нужного вам цвета (например, белого), помещая за ним цвет div 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).

Ответ 5

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

Ответ 6

Если вы используете jQueryUI, в UI/Effects

есть функция pulsate

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

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

Ответ 7

Вы можете использовать этот плагин (поместить его в файл js и использовать его через script -tag)

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

Ответ 8

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

Ответ 9

Вы можете расширить метод 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

Ответ 10

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

(не требуется jquery-ui/animate/color).

Если вы хотите только желтый эффект "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)
};

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

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

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

Ответ 11

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

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

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

Ответ 12

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

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

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

Ответ 13

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

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

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

Ответ 14

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

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

Мигает дважды... что все люди!

Ответ 15

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

Ответ 16

Для меня работают следующие коды. Определите две функции 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);

Ответ 17

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

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

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

Ответ 18

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

Это то, что я придумал, и это работает для меня (нет плагинов, просто 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.

Ответ 19

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

Простая и гибкая

Ответ 20

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

3000 - 3 секунды

Из непрозрачности 1 он исчезает до 0,3, затем до 1 и т.д.

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

Требуется только jQuery.:)

Ответ 21

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

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

Ответ 22

Если включить библиотеку overkill, то это решение, которое гарантированно будет работать.

$('div').click(function() {
    $(this).css('background-color','#FFFFCC');
    setTimeout(function() { $(this).fadeOut('slow').fadeIn('slow'); } , 1000); 
    setTimeout(function() { $(this).css('background-color','#FFFFFF'); } , 1000); 
});

Пуск события установки
Установить цвет фона элемента блока
Внутри setTimeout используйте fadeOut и fadeIn для создания небольшого эффекта анимации.
Внутри второго setTimeout reset цвет фона по умолчанию

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

Ответ 23

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

Ответ 24

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

Ответ 25

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

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

Ответ 26

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

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

Ответ 27

просто введите elem.fadeOut(10).fadeIn(10);

Ответ 28

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

Ответ 29

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

JQuery.pulsate() ^{* с помощью Demos}

пример инициализатора:

$( ". pulse4" ). pulsate ({speed: 2500})
$( ". CommandBox button: visible" ). pulsate ({color: "# f00", speed: 200, reach: 85, repeat: 15})

Ответ 30

Я использую этот. хотя еще не проверены во всех браузерах. просто измените это так, как вам нравится,

использование: hlight($("#mydiv"));

function hlight(elementid){
    var hlight= "#fe1414"; //set the hightlight color
    var aspeed= 2000; //set animation speed
    var orig= "#ffffff"; // set default background color
    elementid.stop().css("background-color", hlight).animate({backgroundColor: orig}, aspeed);
}

ПРИМЕЧАНИЕ. Вам нужен пользовательский интерфейс jquery, добавленный в ваш заголовок.