javascript Jquery 不透明度淡入循环
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12740235/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Opacity Fade In Out Loop
提问by Stepan Parunashvili
One of my clients asked me to make a blinking effect on a div. I think that might not be the best thing for him, maybe light fading in and out of opacity will get the attention of his customers, without annoying them.
我的一位客户要求我在 div 上制作闪烁效果。我认为这对他来说可能不是最好的事情，也许淡入淡出不透明会引起他的客户的注意，而不会打扰他们。
I currently have
我目前有
<a class="special_button" href="#">Special Offers ›</a>
I have the following code for another div, which causes a fade in on browser load :
我有另一个 div 的以下代码，这会导致浏览器加载淡入：
$('.logo-top').delay(700).animate({
'opacity' : '1',
'top' : '+=40px'
}, { duration: 700, easing: 'swing' });
How would I do something similar for the special_button, but instead looping the opacity? From say 80 to 100?
我将如何为 special_button 做类似的事情，而不是循环不透明度？从 80 到 100？
It would even be better if it looped a certain amount of times, maybe like 5.
如果循环一定次数会更好，可能像 5 次。
Best, Stepan
最好的，斯捷潘
回答by Ulan Murzatayev
You probably want to have something like this jsFiddle.
你可能想要像这样的jsFiddle。
And you can also indicate the number of times you want this to blink, just by keeping a counter.
您还可以通过保留一个计数器来指示您希望它闪烁的次数。
Code from jsFiddle:
来自 jsFiddle 的代码：
$(document).ready(function() {
function runIt() {
var baloon = $('#baloon');
baloon.animate({opacity:'1'}, 1000);
baloon.animate({opacity:'0.5'}, 1000, runIt);
}
runIt();
});
回答by Bram Vanroy
Why not use CSS3 keyframes?
为什么不使用 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 ›</span>You can use a fallback for older browsers then. Any of the scripts the other propsed are good but I would advise Ulan's solution.
然后，您可以对旧浏览器使用回退。其他提出的任何脚本都很好，但我会建议乌兰的解决方案。
回答by jfriend00
You can do it like this;
你可以这样做；
(function() {
var cnt = 0;
var specials = $(".special_button");
function next() {
if (cnt < 5) {
specials.fadeTo(2000, .1).fadeTo(2000, 1, next);
++cnt;
}
}
next();
})();
?
Working demo: http://jsfiddle.net/jfriend00/558GY/
工作演示：http: //jsfiddle.net/jfriend00/558GY/
FYI, the difference between 80% and 100% opacity is pretty subtle. I made the difference much greater in the demo. You can obviously tune to whatever effect you want.
仅供参考，80% 和 100% 不透明度之间的差异非常微妙。我在演示中使差异更大。您显然可以调整到您想要的任何效果。
回答by Berker Yüceer
As far as i understand you want something flashing here its:
据我了解，您想要在这里闪烁的东西：
$("document").ready(function() {
anm(".special_button");
});
function anm(element) {
$(element).delay(200).animate({ opacity: 'toggle' }, 1000, function() { anm(element); });
}
回答by peter
if you like short code then you use the plugin jquery-timingfor timing stuff in jQuery. It shrinks your complete code to:
如果你喜欢短代码，那么你可以使用插件 jquery-timing在 jQuery 中计时。它将您的完整代码缩小为：
$('#baloon').repeat().fadeTo(1000,1).fadeTo(1000,0.5,$);
Oh, and when you want it to toggle a specific number of times (e.g. 20), then you write
哦，当您希望它切换特定次数（例如 20 次）时，您可以编写
$('#baloon').repeat().fadeTo(1000,1).fadeTo(1000,0.5,$).until(20);
Cool, eh?
酷，嗯？
