Jquery Opacity淡出循环

Question

我的一位客户让我对div做出眨眼的效果.我认为这可能不是他的最好的事情,也许点燃淡入和淡出的不透明度将得到他的客户的关注,没有恼人的他们.

我现在有

 <a class="special_button" href="#">Special Offers &rsaquo;</a>

我有另外一个div的代码,导致浏览器加载淡入:

$('.logo-top').delay(700).animate({
     'opacity' : '1',        
     'top' : '+=40px'
}, { duration: 700, easing: 'swing' });

我如何为special_button做类似的事情,而是循环不透明度？从80到100？

如果它循环一定次数甚至可能更好5甚至更好.

最好的,斯捷潘

Answer 1

你可能想要像这样的jsFiddle.

而且你也可以通过保持计数器来指示你想要闪烁的次数.

来自jsFiddle的代码:

$(document).ready(function() {
     function runIt() {           
       var baloon = $('#baloon');
       baloon.animate({opacity:'1'}, 1000);
       baloon.animate({opacity:'0.5'}, 1000, runIt);
    }
    runIt();
});

Answer 2

为什么不使用CSS3关键帧？

.twinkle {
  background: red;
  padding: 0.2em;
  margin: 50px;
}

@-webkit-keyframes twinkly {
  from {opacity: 1;}
  to {opacity: 0.4;}
}

@-moz-keyframes twinkly {
  from {opacity: 1;}
  to {opacity: 0.4;}
}

@-ms-keyframes twinkly {
  from {opacity: 1;}
  to {opacity: 0.4;}
}

@keyframes twinkly {
  from {opacity: 1;}
  to {opacity: 0.4;}
}

.twinkle {
  -webkit-animation: twinkly 1s alternate infinite;
  -moz-animation: twinkly 1s alternate infinite;
  -ms-animation: twinkly 1s alternate infinite;
  animation: twinkly 1s alternate infinite;
}

<span class="twinkle">Special Offers &rsaquo;</span>

您可以使用旧版浏览器的后备.对方提出的任何脚本都很好,但我会建议乌兰的解决方案.