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


当前回答

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

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

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

其他回答

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

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

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

最简单的方法是这样做:

<script>

setInterval(function(){

    $(".flash-it").toggleClass("hide");

},700)
</script>

直接jquery,没有插件。它会闪烁指定的次数,在闪烁时改变背景颜色,然后再将其改变回来。

function blink(target, count, blinkspeed, bc) {
    let promises=[];
    const b=target.css(`background-color`);
    target.css(`background-color`, bc||b);
    for (i=1; i<count; i++) {
            const blink = target.fadeTo(blinkspeed||100, .3).fadeTo(blinkspeed||100, 1.0);
            promises.push(blink);
    }
    // wait for all the blinking to finish before changing the background color back
    $.when.apply(null, promises).done(function() {
            target.css(`background-color`, b);
    });
    promises=undefined;
}

例子:

blink($(`.alert-danger`), 5, 200, `yellow`);

下面是一个混合使用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;
}

你可以使用jquery的pulse插件来强制将注意力集中在任何html元素上,控制速度、重复和颜色。

jquery . pulse() *带有演示

样本初始化:

$ (" .pulse4 ") .pulsate({速度:2500}) $("。CommandBox按钮:可见”)。脉动({颜色:“#f00”,速度:200,达到:85,重复:15})