jQuery“闪烁突出显示”对div的影响？

Posted 2023-03-06

【中文标题】jQuery“闪烁突出显示”对div的影响？

【英文标题】：jQuery "blinking highlight" effect on div?

【发布时间】：2011-07-09 11:49:37

【问题描述】：

我正在寻找一种方法来执行以下操作。

我将<div> 添加到页面，然后ajax 回调返回一些值。 <div> 填充了来自 ajax 调用的值，然后 <div> 被附加到另一个 <div> 之前，它充当表格列。

我想引起用户的注意，向她/他展示页面上有新内容。 我希望<div> 闪烁，而不是显示/隐藏，而是高亮/取消高亮一段时间，比如说 5 秒。

我一直在研究 blink 插件，但据我所知，它只在元素上显示/隐藏。

顺便说一句，解决方案必须是跨浏览器的，是的，不幸的是，IE 包括在内。我可能需要稍微修改一下才能让它在 IE 中工作，但总的来说它必须工作。

【问题讨论】：

请不要。如果必须，只需使用高亮效果 (docs.jquery.com/UI/Effects/Highlight) 将其高亮，但不要让它闪烁。

@tv 我认为短暂的两三个“眨眼”（“眨眼”希望是一些微妙的东西，比如动画边框发光或类似的东西）是可以的，不刺激，但绝对老- 长时间眨眼会很糟糕。

呵呵，我知道眨眼很烦人，但它其实是有目的的。用户不需要整天坐在显示器旁边，所以他必须从远处看看是否有什么变化

你们太搞笑了。网页只用于你们认为正确的事情？我不想强调，我需要眨眼，因为我正在编写一个要在大尺寸电视上观看的过程监控页面，它需要闪烁红色并继续，以便人们的眼睛被吸引。

How do you make an element "flash" in jQuery的可能重复

【参考方案1】：

jQuery UI 高光效果就是您要找的。

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

文档和演示可以在here找到

---

编辑： 或许jQuery UI脉动效应更合适，见here

---

编辑#2： 要调整不透明度，您可以这样做：

$("div").click(function() 
  // do fading 3 times
  for(i=0;i<3;i++) 
    $(this).fadeTo('slow', 0.5).fadeTo('slow', 1.0);
  
);

...所以它的不透明度不会低于 50%。

【讨论】：

脉动是我正在寻找的。非常感谢。只是，有没有办法阻止它完全消失。只是为了淡化让我们说 50% 的不透明度？也许只是为了链接高亮效果几次？

【参考方案2】：

您可能想查看 jQuery UI。具体来说，高亮效果：

http://jqueryui.com/demos/effect/

【参考方案3】：

看看http://jqueryui.com/demos/effect/。它有一个名为 pulsate 的效果，可以完全按照您的意愿行事。

$("#trigger").change(function() $("#div_you_want_to_blink").effect("pulsate"););

【参考方案4】：

如果不想包含整个 jQuery UI，可以使用jQuery.pulse.js 代替。

要获得改变不透明度的循环动画，请执行以下操作：

$('#target').pulse(opacity: 0.8, duration : 100, pulses : 5);

它很轻（小于 1kb），允许您循环播放任何类型的动画。

【讨论】：

仍然需要 jQuery UI “效果”

@JeromeJaglale 我在没有 jQuery UI 的情况下使用它，因为可以单独在 jQuery 中完成不透明度更改。对你来说应该是一样的，除非你使用的是 jQuery UI 特定的动画。

好点。我被第一个需要 jQuery UI 效果的演示（文本脉冲红色）误导了。

只是一个注释。您只需要包含 jquery.color.js 即可获得颜色。

【参考方案5】：

如果您不想要 jQuery UI 的开销，我最近使用 .animate() 编写了一个递归解决方案。您可以根据需要自定义延迟和颜色。

function doBlink(id, count) 
    $(id).animate( backgroundColor: "#fee3ea" , 
        duration: 100, 
        complete: function() 

            // reset
            $(id).delay(100).animate( backgroundColor: "#ffffff" , 
                duration: 100,
                complete: function() 

                    // maybe call next round
                    if(count > 1) 
                        doBlink(id, --count);
                    
                
            );

        
    );

当然，您需要颜色插件才能让backgroundColor 与.animate() 一起使用。 https://github.com/jquery/jquery-color

为了提供一些上下文，我就是这样称呼它的。我需要将页面滚动到我的目标 div，然后将其闪烁。

$(window).load(function()
    $('html,body').animate(
        scrollTop: $(scrollToId).offset().top - 50
    , 
        duration: 400,
        complete: function()  doBlink(scrollToId, 5); 
    );
);

【参考方案6】：

我认为您可以使用我给出的类似答案。你可以在这里找到它...https://***.com/a/19083993/2063096

应该适用于所有浏览器，因为它只适用于 javascript 和 jQuery。

注意：此解决方案不使用 jQuery UI，还有一个 fiddle，因此您可以在代码中实现之前随心所欲地玩弄它。

【参考方案7】：

这是我创建的自定义闪烁效果，使用setInterval 和fadeTo

HTML -

<div id="box">Box</div>

JS -

setInterval(function()blink(), 1000);


    function blink() 
        $("#box").fadeTo(100, 0.1).fadeTo(200, 1.0);
    

尽可能简单。

http://jsfiddle.net/Ajey/25Wfn/

【讨论】：

工作得很好！并且不需要 JQuery UI。

很好的解决方案！使用 Jquery 没有任何问题。谢谢

这里是最好的解决方案！

这里最好的解决方案！

【参考方案8】：

我使用不同的预定义颜色，如下所示：

theme = 
    whateverFlashColor: '#ffffaa',
    whateverElseFlashColor: '#bbffaa',
    whateverElseThenFlashColor: '#ffffff',
;

并像这样使用它们

$('#element').effect("highlight", color:theme.whateverFlashColor, 1000);

简单:)

【参考方案9】：

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

【讨论】：

FadeOut/FadeIn 最后隐藏/显示元素，这不是我想要的。我需要在不隐藏元素的情况下增加/减少颜色不透明度

不，elem.show().hide() 就是这样做的。 FadeOut/FadeIn 改变不透明度。您可以调整淡出/淡入的持续时间以获得所需的效果。它隐藏了一次元素。

【参考方案10】：

如果您还没有使用 Jquery UI 库并且想要模仿效果，您可以做的非常简单

$('#blinkElement').fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100);

您还可以调整数字以获得更快或更慢的数字，以更好地适应您的设计。

这也可以是一个全局 jquery 函数，因此您可以在整个站点中使用相同的效果。另请注意，如果将此代码放在 for 循环中，则可以有 1 百万个脉冲，因此您不受限于默认 6 或默认值的多少。

编辑： 将此添加为全局 jQuery 函数

$.fn.Blink = function (interval = 100, iterate = 1) 
    for (i = 1; i <= iterate; i++)
        $(this).fadeOut(interval).fadeIn(interval);

使用以下命令轻松地从您的站点中闪烁任何元素

$('#myElement').Blink(); // Will Blink once

$('#myElement').Blink(500); // Will Blink once, but slowly

$('#myElement').Blink(100, 50); // Will Blink 50 times once

【参考方案11】：

试试 jquery.blink.js 插件：

https://github.com/webarthur/jquery-blink

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="/path/to/jquery.blink.js"></script>

<script>
jQuery('span').blink(color:'white', color:'black', 50);
</script>

#享受吧！

【参考方案12】：

<script>
$(document).ready(function()
    var count = 0;
    do 
        $('#toFlash').fadeOut(500).fadeIn(500);
        count++;
     while(count < 10);/*set how many time you want it to flash*/
);
</script

【参考方案13】：

检查一下 -

<input type="button" id="btnclick" value="click" />
var intervalA;
        var intervalB;

        $(document).ready(function () 

            $('#btnclick').click(function () 
                blinkFont();

                setTimeout(function () 
                    clearInterval(intervalA);
                    clearInterval(intervalB);
                , 5000);
            );
        );

        function blinkFont() 
            document.getElementById("blink").style.color = "red"
            document.getElementById("blink").style.background = "black"
            intervalA = setTimeout("blinkFont()", 500);
        

        function setblinkFont() 
            document.getElementById("blink").style.color = "black"
            document.getElementById("blink").style.background = "red"
            intervalB = setTimeout("blinkFont()", 500);
        

    </script>

    <div id="blink" class="live-chat">
        <span>This is blinking text and background</span>
    </div>

【参考方案14】：

因为我没有看到任何不需要额外库的基于 jQuery 的解决方案，所以这里是一个简单的解决方案，它比使用淡入/淡出的解决方案更灵活。

$.fn.blink = function (count) 
    var $this = $(this);

    count = count - 1 || 0;

    $this.animate(opacity: .25, 100, function () 
        $this.animate(opacity: 1, 100, function () 
            if (count > 0) 
                $this.blink(count);
            
        );
    );
;

这样使用

$('#element').blink(3); // 3 Times.

【参考方案15】：

我找不到我要找的确切内容，所以写了一些尽可能基本的东西。突出显示的类可能只是一个背景颜色。

var blinking = false; // global scope

function start_blinking() 
    blinking = true;
    blink();


function stop_blinking() 
    blinking = false;


function blink(x=0) 
    $("#element").removeClass("highlighted"); // default to not highlighted to account for the extra iteration after stopping

    if (blinking) 
        if (x%2 == 0) $("#element").addClass("highlighted"); // highlight on even numbers of x
        setTimeout(function()blink(++x),500); // increment x and recurse