CSS / jQuery:使图标闪烁

时间:2011-01-11 20:48:55

标签: jquery css

我记得做过一些css学习,我学会了做文字装饰:眨眼,文字开始闪烁。

现在我有了一个图标,

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

如果需要,可以通过简单的css或jquery来解决这个问题。或者也许在jquery推荐的任何其他好的效果

4 个答案:

答案 0 :(得分:24)

像这样的简单jquery会这样做:

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

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

答案 1 :(得分:5)

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>
&#13;
&#13;
&#13;

答案 2 :(得分:3)

这个怎么样?

CSS:

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

JS:

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

请注意页面上的任何其他动画。它将消耗页面上的线程。

答案 3 :(得分:1)

不,单独使用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();