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

Question

我是jQuery的新手,并且拥有使用Prototype的一些经验.在Prototype中,有一种"闪现"元素的方法 - 即.用另一种颜色短暂地突出显示它并使其淡化回正常,以便用户的眼睛被吸引到它.在jQuery中有这样的方法吗？我看到fadeIn,fadeOut和animate,但我看不到像"flash"那样的东西.也许这三者中的一个可以与适当的输入一起使用？

Answer 1

我的方式是.fadein,.fadeout .fadein,.fadeout ......

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

Answer 2

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

Answer 3

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

Answer 4

5年后......(并且不需要额外的插件)

通过在其后面放置div背景颜色,然后将对象褪色并再次褪色,将其 "脉冲"为您想要的颜色(例如白色).

HTML对象(例如按钮):

<div style="background: #fff;">
  <input type="submit" class="element" value="Whatever" />
</div>

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

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

元素 - 类名

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

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

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

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

Answer 5

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

Answer 6

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

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

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

Answer 7

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

Answer 8

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

Answer 9

您可以通过允许迭代计数执行多次闪烁来进一步扩展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

Answer 10

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

Answer 11

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

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

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

Answer 12

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

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

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

Answer 13

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

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

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

Answer 14

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

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

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

Answer 15

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

Answer 16

后来发现了这么多卫星，但如果有人关心，这似乎是让某些东西永久闪烁的好方法：

$( "#someDiv" ).hide();

setInterval(function(){
     $( "#someDiv" ).fadeIn(1000).fadeOut(1000);
},0)

Answer 17

我正在寻找解决此问题的方法，但不依赖于 jQuery UI。

这就是我想出来的，它对我有用（没有插件，只有 Javascript 和 jQuery）；-- 这是工作小提琴 -- http://jsfiddle.net/CriddleCraddle/yYcaY/2/

将 CSS 文件中的当前 CSS 参数设置为普通 css，并创建一个新类，该类只处理参数以更改 ie 背景颜色，并将其设置为 '!important' 以覆盖默认行为。像这样...

.button_flash {
background-color: #8DABFF !important;
}//This is the color to change to.  

然后只需使用下面的函数并将 DOM 元素作为字符串传递，一个表示您希望 flash 发生的次数的整数，您想要更改的类，以及一个表示延迟的整数。

注意：如果您为 'times' 变量传递偶数，您将得到开始时的类，如果传递奇数，则最终会得到切换的类。两者都对不同的事情有用。我使用“i”来更改延迟时间，否则它们会同时触发并且效果会丢失。

function flashIt(element, times, klass, delay){
  for (var i=0; i < times; i++){
    setTimeout(function(){
      $(element).toggleClass(klass);
    }, delay + (300 * i));
  };
};

//Then run the following code with either another delay to delay the original start, or
// without another delay.  I have provided both options below.

//without a start delay just call
flashIt('.info_status button', 10, 'button_flash', 500)

//with a start delay just call
setTimeout(function(){
  flashIt('.info_status button', 10, 'button_flash', 500)
}, 4700);
// Just change the 4700 above to your liking for the start delay.  In this case, 
//I need about five seconds before the flash started.