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


当前回答

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

jquery . pulse() *带有演示

样本初始化:

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

其他回答

我的方法是。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>

我真不敢相信这还不是这个问题。你要做的就是:

("#someElement").show('highlight',{color: '#C8FB5E'},'fast');

这完全是你想要它做的,超级简单,适用于show()和hide()方法。

你可以使用css3动画来闪现一个元素

.flash {
  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;

  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;

  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;
}

@keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-webkit-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-moz-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-ms-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

并用jQuery来添加类

jQuery(selector).addClass("flash");

这是足够通用的,你可以编写任何你想要动画的代码。您甚至可以将延迟从300ms减少到33ms,并退色等。

// Flash linked to hash.
var hash = location.hash.substr(1);
if (hash) {
    hash = $("#" + hash);
    var color = hash.css("color"), count = 1;
    function hashFade () {
        if (++count < 7) setTimeout(hashFade, 300);
        hash.css("color", count % 2 ? color : "red");
    }
    hashFade();
}

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

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


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