Я новичок в jQuery и имею некоторый опыт использования Prototype. В Prototype есть метод "прошивки" элемента, т.е. ненадолго выделите его другим цветом и сделайте так, чтобы он стал нормальным, чтобы внимание пользователя было обращено на него. Есть ли такой метод в jQuery? Я вижу fadeIn, fadeOut и animate, но не вижу ничего похожего на «вспышку». Может быть, один из этих трех можно использовать с соответствующими входами?
Как сделать так, чтобы элемент мигал в jQuery
Ответы (38)
Мой способ .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>
$('..').delay(100).fadeOut().fadeIn('slow')
- person alexandru.topliceanu; 30.08.2012
var $someElement = $("#someElement"); $someElement.fadeIn(100, function(){ $someElement.fadeOut(100, function(){ /*...etc...*/ }) })
- person thekingoftruth; 01.10.2013
Вы можете использовать плагин 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);
addClass('class', 1000)
приведет к анимации элемента для этого класса.
- person Nick Caballero; 06.07.2012
Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated.
- Если вы хотите анимировать цвет, вам НУЖЕН пользовательский интерфейс jQuery или какой-либо другой плагин.
- person Adam Tomat; 09.04.2013
Вы можете использовать анимацию 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");
-webkit
, поэтому необходимо @keyframes
at-правило.
- person kmurph79; 01.12.2015
@keyframes
и animation
, поэтому нет необходимости использовать какие-либо версии с префиксом, кроме возможно -webkit-
(для браузера Blackberry).
- person coredumperror; 17.10.2017
Через 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); });
element - название класса
первое число в fadeTo()
- миллисекунды для перехода
второе число в fadeTo()
- непрозрачность объекта после исчезновения / исчезновения
Вы можете проверить это в правом нижнем углу этой веб-страницы: https://single.majlovesreg.one/v1/
Редактировать (willsteel) без дублирования селектора с помощью $ (this) и измененных значений для фактического выполнения мигания (в соответствии с запросом OP).
fadeTo(0000)
- Металлика
- person vulcan raven; 28.11.2014
$.fn.flashUnlimited=function(){$(this).fadeTo('medium',0.3,function(){$(this).fadeTo('medium',1.0,$(this).flashUnlimited);});}
Затем вы можете назвать его как $('#mydiv').flashUnlimited();
- он выполняет то, что Маджал ответил выше, и вызывает себя снова в конце цикла.
- person Jay Dadhania; 24.09.2019
Полагаю, вы можете использовать эффект выделения в пользовательском интерфейсе jQuery, чтобы добиться того же.
Если вы используете jQueryUI, в UI/Effects
есть функция pulsate
.
$("div").click(function () {
$(this).effect("pulsate", { times:3 }, 2000);
});
http://docs.jquery.com/UI/Effects/Pulsate
pulsate
отлично работает в Chrome.
- person SooDesuNe; 03.02.2011
Чистое решение jQuery.
(jquery-ui / animate / 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)
};
Вышеупомянутый скрипт просто затухает желтым цветом на 1 секунду, что идеально подходит для того, чтобы сообщить пользователю, что элемент был обновлен, или что-то подобное.
Использование:
flash($('#your-element'))
Вы можете использовать этот плагин (поместите его в файл 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
var iterationDuration = Math.floor(duration / iterations);
, чтобы вы могли делить на нечетные числа, и сделал его return this;
, чтобы вы могли связать после него другие методы.
- person user1477388; 20.07.2014
Как насчет действительно простого ответа?
$('selector').fadeTo('fast',0).fadeTo('fast',1).fadeTo('fast',0).fadeTo('fast',1)
Мигает дважды ... это все, ребята!
Не могу поверить, что это еще не вопрос. Все, что вам нужно сделать:
("#someElement").show('highlight',{color: '#C8FB5E'},'fast');
Это делает именно то, что вы хотите, это очень просто, работает как для show()
, так и для hide()
методов.
Это может быть более актуальный ответ и короче, так как после этого поста все несколько консолидировалось. Требуется jquery-ui-effect-highlight.
$("div").click(function () {
$(this).effect("highlight", {}, 3000);
});
http://docs.jquery.com/UI/Effects/Highlight
Будет ли эффект импульса (офлайн) JQuery плагин подходит для того, что вы ищете?
Вы можете добавить длительность для ограничения воздействия импульса по времени.
Как упоминалось в комментариях JP, теперь есть его обновленный плагин Pulse.
См. его репозиторий GitHub. А вот демонстрация.
Я нашел это много лун позже, но если кому-то интересно, похоже, это хороший способ заставить что-то мигать постоянно:
$( "#someDiv" ).hide();
setInterval(function(){
$( "#someDiv" ).fadeIn(1000).fadeOut(1000);
},0)
Я искал решение этой проблемы, но не полагался на 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.
У меня работают следующие коды. Определите две функции постепенного появления и исчезновения и поместите их в обратный вызов друг друга.
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);
Если включение библиотеки является излишним, вот решение, которое гарантированно будет работать.
$('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 сбросить цвет фона по умолчанию
Протестировано в нескольких браузерах, работает нормально.
Как и 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
К сожалению, для верхнего ответа требуется JQuery UI. http://api.jquery.com/animate/
Вот ванильное решение JQuery
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');
- person Michael Blackburn; 13.11.2014
Вот немного улучшенная версия решения 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;
}
Соберите это из всего вышеперечисленного - простое решение для перепрошивки элемента и возврата к исходному цвету bg ...
$.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
!
- person Birla; 16.07.2014
Вот решение, в котором используется сочетание анимации 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"). pulsate ({speed: 2500})
- $ (". Кнопка CommandBox: видимая"). Pulsate ({color: "# f00", скорость: 200, досягаемость: 85, повторение: 15})
Я пользуюсь этим. хотя еще не проверено на всех браузерах. просто измените это так, как вам нравится,
использование: 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, добавленный в ваш заголовок.
Эта функция заставляет его мигать. Он должен использовать cssHooks, поскольку функция background-color по умолчанию возвращает rgb.
Надеюсь, это поможет!
$.cssHooks.backgroundColor = {
get: function(elem) {
if (elem.currentStyle)
var bg = elem.currentStyle["backgroundColor"];
else if (window.getComputedStyle)
var bg = document.defaultView.getComputedStyle(elem,
null).getPropertyValue("background-color");
if (bg.search("rgb") == -1)
return bg;
else {
bg = bg.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
}
}
}
function blink(element,blinkTimes,color,originalColor){
var changeToColor;
if(blinkTimes === null || blinkTimes === undefined)
blinkTimes = 1;
if(!originalColor || originalColor === null || originalColor === undefined)
originalColor = $(element).css("backgroundColor");
if(!color || color === null || color === undefined)
color = "#ffffdf";
if($(element).css("backgroundColor") == color){
changeToColor = originalColor;
}else{
changeToColor = color;
--blinkTimes;
}
if(blinkTimes >= 0){
$(element).animate({
"background-color": changeToColor,
}, {
duration: 500,
complete: function() {
blink(element, blinkTimes, color, originalColor);
return true;
}
});
}else{
$(element).removeAttr("style");
}
return true;
}
Лучше всего сделать так:
<script>
setInterval(function(){
$(".flash-it").toggleClass("hide");
},700)
</script>
При работе с jQuery 1.10.2 он дважды вызывает раскрывающийся список и заменяет текст на ошибку. Он также сохраняет значения измененных атрибутов для их восстановления.
// shows the user an error has occurred
$("#myDropdown").fadeOut(700, function(){
var text = $(this).find("option:selected").text();
var background = $(this).css( "background" );
$(this).css('background', 'red');
$(this).find("option:selected").text("Error Occurred");
$(this).fadeIn(700, function(){
$(this).fadeOut(700, function(){
$(this).fadeIn(700, function(){
$(this).fadeOut(700, function(){
$(this).find("option:selected").text(text);
$(this).css("background", background);
$(this).fadeIn(700);
})
})
})
})
});
Выполняется через обратные вызовы - чтобы не пропустить ни одну анимацию.
Создайте два класса, задав каждому цвет фона:
.flash{
background: yellow;
}
.noflash{
background: white;
}
Создайте div с одним из этих классов:
<div class="noflash"></div>
Следующая функция будет переключать классы и заставлять их мигать:
var i = 0, howManyTimes = 7;
function flashingDiv() {
$('.flash').toggleClass("noFlash")
i++;
if( i <= howManyTimes ){
setTimeout( f, 200 );
}
}
f();
Прямой jquery, без плагинов. Он мигает указанное количество раз, меняет цвет фона во время мигания, а затем снова меняет его.
function blink(target, count, blinkspeed, bc) {
let promises=[];
const b=target.css(`background-color`);
target.css(`background-color`, bc||b);
for (i=1; i<count; i++) {
const blink = target.fadeTo(blinkspeed||100, .3).fadeTo(blinkspeed||100, 1.0);
promises.push(blink);
}
// wait for all the blinking to finish before changing the background color back
$.when.apply(null, promises).done(function() {
target.css(`background-color`, b);
});
promises=undefined;
}
Пример:
blink($(`.alert-danger`), 5, 200, `yellow`);
вы можете использовать этот код :) измените значение мили для изменения скорости анимации
var mili = 300
for (var i = 2; i < 8; i++) {
if (i % 2 == 0) {
$("#lblTransferCount").fadeOut(mili)
} else {
$("#lblTransferCount").fadeIn(mili)
}
}
Вы можете использовать эту замечательную библиотеку для создания любого анимационного эффекта на вашем элементе: http://daneden.github.io/animate.css/
fadeIn
и fadeOut
влияет на другие элементы-братья, потому что оно переключает свойство css display
, в моем случае это выглядит странно. Но это решает проблему. Спасибо, работает элегантно, как шарм.
- person fsevenm; 30.03.2020
$.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); } };
- person Cory Mawhorter   schedule 23.03.2012text-decoration:blink
, затем удалите его. - person Rafael Herscovici   schedule 29.11.2012