CSS/jQuery: сделать значок мигающим

Я помню, как я начал изучать css, где научился делать текстовое оформление: мигать, а текст начал мигать.CSS/jQuery: сделать значок мигающим

Теперь у меня есть значок,

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

Удивление, если я могу сделать это мерцание, либо простым CSS или JQuery, если это необходимо. Или, может быть, какие-либо другие приятные эффекты, доступные в JQuery рекомендуется

источник

2011-01-11 Karem

Это не вопрос о том, вы можете, это вопрос о том, следует: P – BoltClock

Вы можете использовать плагин JQuery Blink: http://plugins.jquery.com/project/blink – DaiYoukai

Вы можете использовать '' теги. :-P –

Простой JQuery, как это будет делать:

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

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

источник

2011-01-11 20:56:55 Hoatzin

+1 это отлично работает. http://jsfiddle.net/wpwtL/ –

Кроме того, я должен предупредить вас, что в IE это будет выглядеть ужасно, если вы не преобразуете свой значок PNG в GIF или что-то в этом роде ... или вы можете просто не делать этого заботиться об IE. – Hoatzin

Можно ли мигать иконкой с помощью javascript? –

Нет, не представляется возможным с только CSS.

jQuery сам не имеет предопределенных анимаций, но предоставляет methods to easily animate сам.

Для мигания типа:

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

источник

2011-01-11 20:59:10 Kissaki

что по этому поводу?

CSS:

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

JS:

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

Просто будьте осторожны, так как с любой другой анимации на странице. Он будет потреблять поток на странице.

источник

2011-01-11 21:06:22

CSS должен быть '.iconPM.no-image {background: none; } ' –

Исправлено. Благодаря :) –

Теперь анимации CSS fairly well supported, поэтому я решил поделиться только с 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>

источник

2016-03-25 09:59:58 SeinopSys

CSS/jQuery: сделать значок мигающим

ответ

Смежные вопросы