你如何在jQuery中创建一个元素"flash"

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

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

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);

.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(selector).addClass("flash");

jQuery(vanilla,没有其他插件):

$('.element').fadeTo(100, 0.3, function() { $(this).fadeTo(500, 1.0); });

元素 - 类名

第一个数字在fadeTo()-毫秒过渡

第二数量在fadeTo()-对象的不透明度之后淡入/ unfade

您可以在本网页的右下角查看:https://single.majlovesreg.one/v1/

编辑(willsteel)没有重复的选择器,使用$(this)和调整值来实际执行闪存(如OP所请求的).

我猜你可以使用jQuery UI中的高亮效果来实现相同的效果.

如果您正在使用jQueryUI,则有pulsate功能UI/Effects

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

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

你可以使用这个插件(把它放在一个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 );

$('#district').css({opacity: 0});
$('#district').animate({opacity: 1}, 700 );

您可以通过允许迭代计数执行多次闪烁来进一步扩展Desheng Li的方法:

// Extend jquery with flashing for elements
$.fn.flash = function(duration, iterations) {
    duration = duration || 1000; // Default to 1 second
    iterations = iterations || 1; // Default to 1 iteration
    var iterationDuration = Math.floor(duration / iterations);

    for (var i = 0; i < iterations; i++) {
        this.fadeOut(iterationDuration).fadeIn(iterationDuration);
    }
    return this;
}

然后你可以用闪烁的时间和次数来调用方法:

$("#someElementId").flash(1000, 4); // Flash 4 times over a period of 1 second

纯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'))

会吗？ 脉冲效应(离线)JQuery插件适合你想要的东西？

您可以添加一个持续时间来及时限制脉冲效果.

正如JP在评论中提到的,现在有他 更新的脉冲插件.
看看他的GitHub回购.这是一个演示.

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

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

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

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

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

这完全符合您的要求,非常简单,适用于两者show()和hide()方法.

一个非常简单的答案怎么样？

$('selector').fadeTo('fast',0).fadeTo('fast',1).fadeTo('fast',0).fadeTo('fast',1)

眨眼两次......这就是所有人!

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