Jquery 脉动时间答案

【问题标题】：Jquery Pulsate TimesJquery 脉动时间
【发布时间】：2011-11-05 14:44:33
【问题描述】：

我使用功能脉动（http://docs.jquery.com/UI/Effects/Pulsate）。使用参数 'times' 我可以设置元素脉动的时间。默认值为 5，但如何设置元素将无限脉动。

【问题讨论】：

【解决方案1】：

我建议您根本不要使用 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 循环来处理times，所以如果不改变插件的逻辑，你不能使用这个插件来实现你的结果：

$.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();
    });
};

【讨论】：

哇，谢谢。最后一个问题，如果我使用淡入淡出示例，元素会消失几毫秒，但淡入淡出元素下的所有元素都会上下移动。对不起我的英语;-)，那么元素是否有可能在不消失的情况下淡入淡出？
抱歉，我没有看到您的评论 - 只需将元素放在具有固定尺寸的包装器中即可：) jsfiddle.net/AlienWebguy/bSWMC/3
没问题，愚蠢的我没看到，但它有效；-) 非常感谢！
有没有办法阻止这种脉冲效应？我正在通过 ajax 检查一个值，我想在值达到 0 时停止这种脉冲效应。谢谢
当然，您只需将fadeIn('slow',pulse) 中的pulse 替换为一个回调函数，该函数有条件检查您的值并相应地执行pulse()。

【解决方案2】：

Jordy，你可以用把脉动放在一个函数里面来完成上面的事情。

//the function
function pulsateforever(){
$("element").effect("pulsate", { times:1 }, pulsatetime,function(){
//repeat after pulsating
pulsateforever();
});
}
//call function when DOM is ready
$(function(){
pulsateforever();
});

确保将 element 替换为您想要跳动的元素，并将 pulsatetime 替换为速度你想让它跳动。

【讨论】：

+1 这绝对有效，但正如我所提到的，这不应该使用 JQueryUI - 我相信一个简单的$('element').fadeOut('slow').delay(500).fadeIn('slow',recursion..) 会是最佳选择。
好的，那我该怎么办？不使用 UI 脉动但淡入淡出？感谢您的帮助；-)！

【解决方案3】：

基于 AlienWebguy 的回答，但没有“隐藏”和“显示”元素，而只是为不透明度设置动画：

(function pulse(){
            $( "#elem" ).delay(200).animate({'opacity':1}).delay(500).animate({'opacity':0},pulse);
        })();

【讨论】：

这很好，很简单，可以完成工作

【解决方案4】：

看看这个新的plugin

像魅力一样工作，脉动效果适用于所有浏览器。

【讨论】：

【解决方案5】：

只是一个疯狂的猜测，但我会尝试 0 或 -1。如果这没有帮助，您可以添加一个接近无限的值，可能是 1000000 或其他值。

【讨论】：