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


当前回答

下面是一个混合使用jQuery和CSS3动画的解决方案。

http://jsfiddle.net/padfv0u9/2/

从本质上讲,你首先将颜色更改为“闪光”颜色,然后使用CSS3动画让颜色逐渐消失。你需要改变过渡持续时间,以使初始的“闪光”比淡出更快。

$(element).removeClass("transition-duration-medium");
$(element).addClass("transition-duration-instant");
$(element).addClass("ko-flash");
setTimeout(function () {
    $(element).removeClass("transition-duration-instant");
    $(element).addClass("transition-duration-medium");
    $(element).removeClass("ko-flash");
}, 500);

其中CSS类如下所示。

.ko-flash {
    background-color: yellow;
}
.transition-duration-instant {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}
.transition-duration-medium {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}

其他回答

function pulse() {
    $('.blink').fadeIn(300).fadeOut(500);
}
setInterval(pulse, 1000);

这是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

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是你想让它闪烁的次数,不需要删除类,它会自己停止闪烁。

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

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

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


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