Как сделать элемент "flash" в jQuery? - PullRequest
233 голосов
/ 09 ноября 2008

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

Ответы [ 36 ]

7 голосов
/ 09 ноября 2008

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

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


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

7 голосов
/ 12 февраля 2013

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

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

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

6 голосов
/ 01 июля 2016
function pulse() {
    $('.blink').fadeIn(300).fadeOut(500);
}
setInterval(pulse, 1000);
6 голосов
/ 26 сентября 2011

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

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

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

6 голосов
/ 13 февраля 2014

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

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

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

4 голосов
/ 22 июля 2013

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

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

setInterval(function(){
     $( "#someDiv" ).fadeIn(1000).fadeOut(1000);
},0)
4 голосов
/ 30 октября 2012

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

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);
3 голосов
/ 30 сентября 2013

Я искал решение этой проблемы, но не полагался на 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 голосов
/ 25 сентября 2016
$("#someElement").fadeTo(3000, 0.3 ).fadeTo(3000, 1).fadeTo(3000, 0.3 ).fadeTo(3000, 1); 

3000 - 3 секунды

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

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

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

3 голосов
/ 20 мая 2016

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...