10

我的一位客户要求我在 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 次。

最好的，斯捷潘

4

5 回答 5

14

你可能想要这样的jsFiddle。

您还可以通过保持一个计数器来指示您希望它闪烁的次数。

来自 jsFiddle 的代码：

$(document).ready(function() {
     function runIt() {           
       var baloon = $('#baloon');
       baloon.animate({opacity:'1'}, 1000);
       baloon.animate({opacity:'0.5'}, 1000, runIt);
    }
    runIt();
});
于 2012-10-05T06:05:25.187 回答
12

为什么不使用 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>

然后，您可以为旧版浏览器使用后备。其他人提出的任何脚本都很好，但我会建议 Ulan 的解决方案。

于 2012-10-05T07:00:06.103 回答
4

你可以这样做；

(function() {
    var cnt = 0;
    var specials = $(".special_button");

    function next() {
        if (cnt < 5) {
            specials.fadeTo(2000, .1).fadeTo(2000, 1, next);
            ++cnt;
        }                    
    }

    next();
})();
​

工作演示：http: //jsfiddle.net/jfriend00/558GY/

仅供参考，80% 和 100% 不透明度之间的差异非常微妙。我在演示中做出了更大的改变。您显然可以调整到您想要的任何效果。

于 2012-10-05T06:34:33.413 回答
1

据我了解，您想要在这里闪烁的东西：

$("document").ready(function() {
    anm(".special_button");
});
function anm(element) {
    $(element).delay(200).animate({ opacity: 'toggle' }, 1000, function() { anm(element); });
}

演示：http: //jsfiddle.net/BerkerYuceer/GdcRs/

于 2012-10-05T06:54:29.590 回答
1

如果你喜欢短代码，那么你可以使用插件 jquery-timing在 jQuery 中进行计时。它将您的完整代码缩减为：

$('#baloon').repeat().fadeTo(1000,1).fadeTo(1000,0.5,$);

哦，当您希望它切换特定次数（例如 20 次）时，您可以编写

$('#baloon').repeat().fadeTo(1000,1).fadeTo(1000,0.5,$).until(20);

酷，嗯？

于 2012-10-05T14:25:38.030 回答