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

Question

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

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

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

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

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

Answer 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%。

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

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

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

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

Answer 6

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

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

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

Answer 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/

Answer 8

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

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

并像这样使用它们

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

简单:)

Answer 9

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

Answer 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

Answer 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>

#享受吧！

Answer 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

Answer 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>

Answer 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.

Answer 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
    }
}