我使用脉冲功能( http://docs.jquery.com/UI/Effects/Pulsate )。通过参数“times”,我可以设置元素脉动的时间。默认值为5,但是如何设置元素会无限脉动。
最佳答案
我建议您根本不要为此使用 JQueryUI - 这是一个非常简单的动画,无需加载 UI 即可轻松完成:
// DOM ready
$(function(){
// Self-executing recursive animation
(function pulse(){
$('#my_div').delay(200).fadeOut('slow').delay(50).fadeIn('slow',pulse);
})();
});
工作演示:http://jsfiddle.net/AlienWebguy/bSWMC/
正如您所看到的,可以通过更改淡入淡出的速度和延迟的持续时间来轻松调整它。
原始的 JQueryUI pulsate()
函数使用 for
循环 time
,因此您无法在不进行更改的情况下使用此插件获得结果插件的逻辑:
$.effects.pulsate = function(o) {
return this.queue(function() {
var elem = $(this),
mode = $.effects.setMode(elem, o.options.mode || 'show');
times = ((o.options.times || 5) * 2) - 1;
duration = o.duration ? o.duration / 2 : $.fx.speeds._default / 2,
isVisible = elem.is(':visible'),
animateTo = 0;
if (!isVisible) {
elem.css('opacity', 0).show();
animateTo = 1;
}
if ((mode == 'hide' && isVisible) || (mode == 'show' && !isVisible)) {
times--;
}
for (var i = 0; i < times; i++) {
elem.animate({ opacity: animateTo }, duration, o.options.easing);
animateTo = (animateTo + 1) % 2;
}
elem.animate({ opacity: animateTo }, duration, o.options.easing, function() {
if (animateTo == 0) {
elem.hide();
}
(o.callback && o.callback.apply(this, arguments));
});
elem
.queue('fx', function() { elem.dequeue(); })
.dequeue();
});
};
关于Jquery 脉动时间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7223503/