align - ¿Cómo se hace un elemento "flash" en jQuery
select menu (30)
Después de 5 años ... (y no se necesita un complemento adicional)
Este "pulsa" el color que deseas (por ejemplo, blanco) al poner un color de fondo div detrás de él, y luego desvanece el objeto y lo vuelve a agregar.
Objeto HTML (ej. Botón):
<div style="background: #fff;">
<input type="submit" class="element" value="Whatever" />
</div>
jQuery (vainilla, no hay otros complementos):
$(''.element'').fadeTo(100, 0.3, function() { $(this).fadeTo(500, 1.0); });
elemento - nombre de la clase
Primer número en fadeTo() : milisegundos para la transición
segundo número en fadeTo() - opacidad del objeto después de fade / unfade
Puede consultar esto en la esquina inferior derecha de esta página web: https://www.majalmirasol.com/v1/
Edite (se sentará) ningún selector duplicado usando $ (esto) y valores ajustados para realizar un flash (como lo solicitó el OP).
Soy nuevo en jQuery y tengo algo de experiencia con Prototype. En Prototype, hay un método para "flashear" un elemento, es decir. resáltelo brevemente en otro color y haga que vuelva a su estado normal para que el usuario se sienta atraído hacia él. ¿Existe tal método en jQuery? Veo fadeIn, fadeOut y animate, pero no veo nada como "flash". ¿Quizás uno de estos tres se puede usar con entradas apropiadas?
Solución jQuery pura.
(No se necesita jquery-ui / animate / color.)
Si todo lo que quieres es ese efecto "flash" amarillo sin cargar el color de 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)
};
La secuencia de comandos anterior simplemente realiza un desvanecimiento amarillo de 1s, perfecto para que el usuario sepa que el elemento se actualizó o algo similar.
Uso:
flash($(''#your-element''))
¿Qué tal una respuesta realmente simple?
$(''selector'').fadeTo(''fast'',0).fadeTo(''fast'',1).fadeTo(''fast'',0).fadeTo(''fast'',1)
Parpadea dos veces ... eso es todo amigos!
Aquí hay una versión ligeramente mejorada de la solución de colbeerhey. Agregué una declaración de retorno para que, en forma jQuery verdadera, encadenemos eventos después de llamar a la animación. También he agregado los argumentos para borrar la cola y saltar al final de una animación.
// 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);
};
Como fadein / fadeout, puedes usar animar 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);
Simple y flexible
Desafortunadamente, la respuesta principal requiere JQuery UI. http://api.jquery.com/animate/
Aquí hay una solución de vainilla 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>
Encontré esta cantidad de lunas más tarde, pero si a alguien le importa, parece que esta es una buena manera de hacer que algo se ilumine permanentemente:
$( "#someDiv" ).hide();
setInterval(function(){
$( "#someDiv" ).fadeIn(1000).fadeOut(1000);
},0)
Esta puede ser una respuesta más actualizada, y es más breve, ya que las cosas se han consolidado de alguna manera desde esta publicación. Requiere jquery-ui-effect-highlight .
$("div").click(function () {
$(this).effect("highlight", {}, 3000);
});
Estaba buscando una solución a este problema pero sin confiar en la interfaz de usuario de jQuery.
Esto es lo que se me ocurrió y funciona para mí (sin complementos, solo Javascript y jQuery); - Aquí está el violín de trabajo - http://jsfiddle.net/CriddleCraddle/yYcaY/2/
Establezca el parámetro CSS actual en su archivo CSS como css normal, y cree una nueva clase que solo maneje el parámetro a cambiar, es decir, el color de fondo, y configúrelo en ''! Important'' para anular el comportamiento predeterminado. Me gusta esto...
.button_flash {
background-color: #8DABFF !important;
}//This is the color to change to.
Luego use la función que se encuentra a continuación y pase el elemento DOM como una cadena, un número entero para el número de veces que desea que ocurra el flash, la clase a la que desea cambiar y un número entero para el retraso.
Nota: Si pasa un número par para la variable ''tiempos'', terminará con la clase con la que comenzó, y si pasa un número impar, terminará con la clase alternada. Ambos son útiles para cosas diferentes. Utilizo la ''i'' para cambiar el tiempo de retardo, o todos se dispararían al mismo tiempo y el efecto se perdería.
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.
Este pulsará el color de fondo de un elemento hasta que se active un evento de mouseover
$.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;
}
Esto es lo suficientemente genérico como para que puedas escribir el código que quieras animar. Incluso puede reducir la demora de 300 ms a 33 ms y atenuar los colores, etc.
// 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();
}
Estoy usando este. aunque todavía no se ha probado en todos los navegadores. solo modifica esto de la manera que quieras,
uso: 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);
}
NOTA: necesita una interfaz de usuario jquery agregada a su encabezado.
Hay una solución para el error de fondo animado. Esta idea incluye un ejemplo de un método de resaltado simple y su uso.
/* 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 */
Los siguientes códigos funcionan para mí. Defina dos funciones de entrada y salida y colóquelas en la devolución de llamada de cada una.
var fIn = function() { $(this).fadeIn(300, fOut); };
var fOut = function() { $(this).fadeOut(300, fIn); };
$(''#element'').fadeOut(300, fIn);
Lo siguiente controla los tiempos de flashes:
var count = 3;
var fIn = function() { $(this).fadeIn(300, fOut); };
var fOut = function() { if (--count > 0) $(this).fadeOut(300, fIn); };
$(''#element'').fadeOut(300, fIn);
Mi camino es .fadein, .fadeout .fadein, .fadeout ......
$("#someElement").fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
No puedo creer que esto no esté en esta pregunta todavía. Todo lo que tienes que hacer:
("#someElement").show(''highlight'',{color: ''#C8FB5E''},''fast'');
Esto hace exactamente lo que quiere que haga, es super fácil, funciona tanto para los métodos show() como para hide() .
Póngalo todo junto con todo lo anterior: una solución fácil para flashear un elemento y volver al color original ...
$.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);
}
Use así:
$(''<some element>'').flash(''#ffffc0'', 1000, 3);
¡Espero que esto ayude!
Podría usar este complemento (póngalo en un archivo js y utilícelo a través de script-tag)
plugins.jquery.com/project/color
Y luego usa algo como esto:
jQuery.fn.flash = function( color, duration )
{
var current = this.css( ''color'' );
this.animate( { color: ''rgb('' + color + '')'' }, duration / 2 );
this.animate( { color: current }, duration / 2 );
}
Esto agrega un método ''flash'' a todos los objetos jQuery:
$( ''#importantElement'' ).flash( ''255,0,0'', 1000 );
Podrías usar el efecto de resalte en jQuery UI para lograr lo mismo, supongo.
Puede ampliar el método de Desheng Li permitiendo que las iteraciones cuenten para realizar múltiples flashes como:
// 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;
}
Luego puede llamar al método con una hora y un número de destellos:
$("#someElementId").flash(1000, 4); // Flash 4 times over a period of 1 second
Puedes usar animaciones css3 para flashear un elemento
.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; }
}
Y tú jQuery para añadir la clase.
jQuery(selector).addClass("flash");
Puedes usar el plugin jQuery Color .
Por ejemplo, para llamar la atención sobre todos los divs en tu página, puedes usar el siguiente código:
$("div").stop().css("background-color", "#FFFF9C")
.animate({ backgroundColor: "#FFFFFF"}, 1500);
Editar - Nuevo y mejorado
Lo siguiente utiliza la misma técnica que la anterior, pero tiene los beneficios adicionales de:
- Resalte parametrizado de color y duración.
- conservando el color de fondo original, en lugar de asumir que es blanco
- Al ser una extensión de jQuery, puedes usarla en cualquier objeto.
Extienda el objeto 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);
}
};
Ejemplo de uso:
$("div").animateHighlight("#dd0000", 1000);
Sería un efecto de pulso (fuera de línea) ¿El complemento JQuery es apropiado para lo que está buscando?
Puede agregar una duración para limitar el efecto de pulso en el tiempo.
Como lo mencionó J-P en los comentarios, ahora está su complemento actualizado de pulso .
Ver su repo de GitHub . Y aquí hay una demo .
Si está utilizando jQueryUI, hay una función de pulsación en UI/Effects
$("div").click(function () {
$(this).effect("pulsate", { times:3 }, 2000);
});
Si incluir una biblioteca es una exageración, aquí hay una solución que está garantizada para funcionar.
$(''div'').click(function() {
$(this).css(''background-color'',''#FFFFCC'');
setTimeout(function() { $(this).fadeOut(''slow'').fadeIn(''slow''); } , 1000);
setTimeout(function() { $(this).css(''background-color'',''#FFFFFF''); } , 1000);
});
- Activar evento de configuración
- Establecer el color de fondo del elemento de bloque
- Dentro de setTimeout usa fadeOut y fadeIn para crear un pequeño efecto de animación.
Dentro del segundo setTimeout restablece el color de fondo predeterminado
Probado en algunos navegadores y funciona muy bien.
acaba de dar elem.fadeOut (10) .fadeIn (10);
puede usar el complemento Pulsate de jquery para forzar y enfocar la atención en cualquier elemento html con control de velocidad, repetición y color.
JQuery.pulsate() * con Demos
inicializador de muestra:
- $ (". pulse4"). pulsate ({speed: 2500})
- $ (". Botón CommandBox: visible"). Pulsar ({color: "# f00", velocidad: 200, alcance: 85, repetición: 15})
$("#someElement").fadeTo(3000, 0.3 ).fadeTo(3000, 1).fadeTo(3000, 0.3 ).fadeTo(3000, 1);
3000 es 3 segundos
De la opacidad 1 se desvanece a 0.3, luego a 1 y así sucesivamente.
Puedes apilar más de estos.
Solo se necesita jQuery. :)
$(''#district'').css({opacity: 0});
$(''#district'').animate({opacity: 1}, 700 );
function pulse() {
$(''.blink'').fadeIn(300).fadeOut(500);
}
setInterval(pulse, 1000);