CSS/jQuery: hacer que el ícono parpadee

Recuerdo haber aprendido algo de CSS donde aprendí a hacer una decoración de texto: pestañee, y el texto comenzó a parpadear.CSS/jQuery: hacer que el ícono parpadee

ahora tengo un icono,

.iconPM{ 
background: url(../images/icons/mail_16x16.png) no-repeat; 
width: 16px; 
height: 16px; 
border: none; 
display:inline-block; 
}

pregunto si puedo hacer este parpadeo, ya sea simple o css jquery si es necesario. O tal vez otros efectos agradables disponibles en jQuery recomienda

Fuente

2011-01-11 Karem

No es una cuestión de si se puede, es una cuestión de si se debe: P – BoltClock

Se puede utilizar un plugin de jQuery parpadeo: http://plugins.jquery.com/project/blink – DaiYoukai

Puede usar las etiquetas ''. :-P –

Un jQuery simple como esto lo haría:

function blink(){ 
    $('.iconPM').delay(100).fadeTo(100,0.5).delay(100).fadeTo(100,1, blink); 
} 

$(document).ready(function() { 
    blink(); 
});

Fuente

2011-01-11 20:56:55 Hoatzin

+1 esto funciona muy bien. http://jsfiddle.net/wpwtL/ –

Excepto, debo advertirte, en IE se verá horrible si no conviertes tu ícono PNG en un GIF o algo así ... o simplemente puedes elegir no se preocupan por IE. – Hoatzin

¿Se puede hacer el parpadeo de un ícono con la ayuda de javascript? –

No, no es posible con CSS solo.

jQuery en sí mismo no tiene animaciones predefinidas, pero proporciona methods to easily animate usted mismo.

Para un abrir y cerrar como:

function t1(){ 
    jQuery(".iconPM").animate({ 
    opacity: 0, 
    }, 1000); 
} 
function t2(){ 
    jQuery(".iconPM").animate({ 
    opacity: 0, 
    }, 1000); 
} 
runT1 = true; 
function rr() { 
    if (runT1) { 
    t1(); 
    } else { 
    t2(); 
    } 
    // toggle between 2 fns 
    runT1 = !runT1; 
    setTimeout("rr()", 500); 
} 
rr();

Fuente

2011-01-11 20:59:10 Kissaki

¿Y esto?

CSS:

.iconPM.no-image{ background:none; }

JS:

var toggleClassFcn = function(){$(".iconPM").toggleClass("no-image");} 
setInterval(toggleClassFcn, 300);

Sólo tenga cuidado al igual que con cualquier otro tipo de animaciones en la página. Consumirá hilo en la página.

Fuente

2011-01-11 21:06:22

CSS debe ser '.iconPM.no-image {background: none; } ' –

Corregido. Gracias :) –

Las animaciones CSS son fairly well supported ahora, así que pensé en compartir una respuesta única de CSS.

.iconPM { 
 
    background: url(https://raw.githubusercontent.com/stephenhutchings/typicons.font/493867748439a8e1ac3b92e275221f359577bd91/src/png-24px/mail.png) center no-repeat; 
 
    background-size: 16px 16px; 
 
    width: 16px; 
 
    height: 16px; 
 
    border: none; 
 
    display:inline-block; 
 
    
 
    animation: blink 2s ease-in infinite; 
 
} 
 

 
@keyframes blink { 
 
    from, to { opacity: 1 } 
 
    50% { opacity: 0 } 
 
}

<span class="iconPM"></span>

Fuente

2016-03-25 09:59:58 SeinopSys

CSS/jQuery: hacer que el ícono parpadee

Respuesta

Cuestiones relacionadas