我是全新的jQuery和有一些使用原型的经验。在Prototype中,有一个方法来“闪现”一个元素。简单地用另一种颜色突出它,然后让它变回正常,这样用户的眼睛就会被吸引到它上面。jQuery中有这样的方法吗?我看到淡出,淡出,和动画,但我没有看到任何像“闪光”。也许这三个中的一个可以与适当的输入一起使用?


当前回答

下面的代码对我有用。定义两个渐入渐出函数,并将它们放在彼此的回调函数中。

var fIn = function() { $(this).fadeIn(300, fOut); };
var fOut = function() { $(this).fadeOut(300, fIn); };
$('#element').fadeOut(300, fIn);

以下控件控制闪光次数:

var count = 3;
var fIn = function() { $(this).fadeIn(300, fOut); };
var fOut = function() { if (--count > 0) $(this).fadeOut(300, fIn); };
$('#element').fadeOut(300, fIn);

其他回答

一个脉冲效果(离线)JQuery插件适合你正在寻找什么?

您可以添加一个持续时间,以便及时限制脉冲效果。


正如J-P在评论中提到的,现在有他更新的脉冲插件。 见他的GitHub回购。这是一个演示。

这个函数使它闪烁。 它必须使用cssHooks,因为rgb默认返回background-color函数。

希望能有所帮助!

$.cssHooks.backgroundColor = {
get: function(elem) {
    if (elem.currentStyle)
        var bg = elem.currentStyle["backgroundColor"];
    else if (window.getComputedStyle)
        var bg = document.defaultView.getComputedStyle(elem,
            null).getPropertyValue("background-color");
    if (bg.search("rgb") == -1)
        return bg;
    else {
        bg = bg.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
        function hex(x) {
            return ("0" + parseInt(x).toString(16)).slice(-2);
        }
        return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
    }
}
}
function blink(element,blinkTimes,color,originalColor){
    var changeToColor;
    if(blinkTimes === null || blinkTimes === undefined)
        blinkTimes = 1;
    if(!originalColor || originalColor === null || originalColor === undefined)
        originalColor = $(element).css("backgroundColor");
    if(!color || color === null || color === undefined)
        color = "#ffffdf";
    if($(element).css("backgroundColor") == color){
        changeToColor = originalColor;
    }else{
        changeToColor = color;
        --blinkTimes;
    }
    if(blinkTimes >= 0){
        $(element).animate({
            "background-color": changeToColor,
        }, {
            duration: 500,
            complete: function() {
                blink(element, blinkTimes, color, originalColor);
                return true;
            }
        });
    }else{
        $(element).removeAttr("style");
    }
    return true;
}

这是colbeerhey解决方案的稍微改进版本。我添加了一个return语句,这样,在真正的jQuery形式中,我们可以在调用动画后链接事件。我还添加了参数来清除队列并跳转到动画的结尾。

// Adds a highlight effect
$.fn.animateHighlight = function(highlightColor, duration) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    this.stop(true,true);
    var originalBg = this.css("backgroundColor");
    return this.css("background-color", highlightBg).animate({backgroundColor: originalBg}, animateMs);
};

一个简单的答案如何?

美元(’selector’)fadeTo(’fast’,0)fadeTo(’fast’,1)fadeTo(’fast’,0). fadeTo(’fast’)(1)

闪烁两次……这就是所有的朋友们!

5年后……(并且不需要额外的插件)

这一个“脉冲”它到你想要的颜色(例如白色),在它后面放一个div背景色,然后淡入对象。

HTML对象(例如按钮):

<div style="background: #fff;">
  <input type="submit" class="element" value="Whatever" />
</div>

jQuery(香草,没有其他插件):

$('.element').fadeTo(100, 0.3, function() { $(this).fadeTo(500, 1.0); });

元素——类名

fadeTo()中的第一个数字-转换的毫秒数

fadeTo()中的第二个数字-对象在fade/unfade之后的不透明度

你可以在这个网页的右下角查看:https://single.majlovesreg.one/v1/

编辑(willsteel)无重复选择器使用$(this)和调整值实际执行一个闪光(作为OP请求)。