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


当前回答

只需要给elem.fadeOut(10).fadeIn(10);

其他回答

纯jQuery解决方案。

(不需要jquery-ui/animate/color)

如果你想要的是黄色的“闪光”效果,而不加载jquery颜色:

var flash = function(elements) {
  var opacity = 100;
  var color = "255, 255, 20" // has to be in this format since we use rgba
  var interval = setInterval(function() {
    opacity -= 3;
    if (opacity <= 0) clearInterval(interval);
    $(elements).css({background: "rgba("+color+", "+opacity/100+")"});
  }, 30)
};

上面的脚本简单地做了1s黄色淡出,非常适合让用户知道元素被更新或类似的事情。

用法:

flash($('#your-element'))

你可以使用这个插件(把它放在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是你想让它闪烁的次数,不需要删除类,它会自己停止闪烁。

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

你可以使用jQuery Color插件。

例如,为了吸引人们对你页面上所有div的注意,你可以使用以下代码:

$("div").stop().css("background-color", "#FFFF9C")
    .animate({ backgroundColor: "#FFFFFF"}, 1500);

编辑-新的和改进

下面使用与上面相同的技术,但它有额外的好处:

参数化的高亮颜色和持续时间 保留原来的背景色,而不是假设它是白色 是jQuery的扩展,所以你可以在任何对象上使用它

扩展jQuery对象:

var notLocked = true;
$.fn.animateHighlight = function(highlightColor, duration) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    var originalBg = this.css("backgroundColor");
    if (notLocked) {
        notLocked = false;
        this.stop().css("background-color", highlightBg)
            .animate({backgroundColor: originalBg}, animateMs);
        setTimeout( function() { notLocked = true; }, animateMs);
    }
};

使用的例子:

$("div").animateHighlight("#dd0000", 1000);

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请求)。