我是全新的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);

其他回答

这是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);
};

这可能是一个最新的答案,而且更简短,因为自从这篇文章以来,事情已经有所巩固。需要jquery-ui-effect-highlight。

$("div").click(function () {
  $(this).effect("highlight", {}, 3000);
});

http://docs.jquery.com/UI/Effects/Highlight

你可以使用这个插件(把它放在js文件中,并通过script-tag使用它)

http://plugins.jquery.com/project/color

然后用这样的方法:

jQuery.fn.flash = function( color, duration )
{

    var current = this.css( 'color' );

    this.animate( { color: 'rgb(' + color + ')' }, duration / 2 );
    this.animate( { color: current }, duration / 2 );

}

这将为所有jQuery对象添加一个'flash'方法:

$( '#importantElement' ).flash( '255,0,0', 1000 );

CSS支持所有主流浏览器的闪烁

.flash {
    animation: flash 0.5s ease-out;
    animation-iteration-count: 10;
}
@keyframes flash {
    0% { opacity: 0.5; }
    50% { opacity: 1.0; }
    100% { opacity: 0.5; }
}

将这个类添加到要闪光的元素中

$(elem).addClass("flash");

迭代计数:10是你想让它闪烁的次数,不需要删除类,它会自己停止闪烁。

使用不透明度:这适用于任何颜色的元素,只要它不是透明的。

一个简单的答案如何?

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

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