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


当前回答

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

其他回答

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

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

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

纯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'))
function pulse() {
    $('.blink').fadeIn(300).fadeOut(500);
}
setInterval(pulse, 1000);

下面是一个混合使用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;
}
$("#someElement").fadeTo(3000, 0.3 ).fadeTo(3000, 1).fadeTo(3000, 0.3 ).fadeTo(3000, 1); 

3000是3秒

从不透明度1淡出到0.3,然后是1,依此类推。

你可以叠更多。

只需要jQuery。:)