2011-01-11 53 views
10

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

+5

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

+1

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

+0

Puede usar las etiquetas ''. :-P –

Respuesta

23

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(); 
}); 
+2

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

+1

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

+0

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

1

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

¿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.

+0

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

+0

Corregido. Gracias :) –

3

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>

Cuestiones relacionadas