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


当前回答

不幸的是,上面的答案需要JQuery UI。http://api.jquery.com/animate/

下面是一个普通的JQuery解决方案

http://jsfiddle.net/EfKBg/

JS

var flash = "<div class='flash'></div>";
$(".hello").prepend(flash);
$('.flash').show().fadeOut('slow');

CSS

.flash {
    background-color: yellow;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

HTML

<div class="hello">Hello World!</div>

其他回答

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

如果你正在使用jQueryUI,在UI/Effects中有一个脉动函数

$("div").click(function () {
      $(this).effect("pulsate", { times:3 }, 2000);
});

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

你可以使用这个很酷的库在你的元素上制作任何类型的动画效果:http://daneden.github.io/animate.css/

你可以使用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);

我的方法是。fadein,。fadeout。fadein,。fadeout ......

$("#someElement").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);

function go1() { $("#demo1").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100)} function go2() { $('#demo2').delay(100).fadeOut().fadeIn('slow') } #demo1, #demo2 { text-align: center; font-family: Helvetica; background: IndianRed; height: 50px; line-height: 50px; width: 150px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button onclick="go1()">Click Me</button> <div id='demo1'>My Element</div> <br> <button onclick="go2()">Click Me</button> (from comment) <div id='demo2'>My Element</div>