jQuery对div的“闪烁突出显示”效果?


87

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

我将a添加<div>到页面中,并且ajax回调返回一些值。将<div>用来自ajax调用的值填充,<div>然后将前缀到另一个<div>作为表列的。

我想引起用户的注意,向他/他表明页面上有新内容。
我希望<div>按钮闪烁,而不是显示/隐藏,而是突出显示/取消突出显示一段时间,例如5秒钟。

我一直在看眨眼插件,但据我所知,它仅在元素上显示/隐藏。

顺便说一句,解决方案必须是跨浏览器的,是的,不幸的是IE也包含在内。我可能必须要破解一些才能使其在IE中工作,但总的来说它必须能够工作。


4
请不要 如果需要,只需用突出显示效果(docs.jquery.com/UI/Effects/Highlight)将其突出显示,但不要使其闪烁。
tvanfosson 2011年

1
@tv我认为短暂的两到三个“闪烁”(希望“闪烁”是微妙的东西,例如动画边框发光或类似的东西)是可以的,并且不会令人烦恼,但肯定是老式闪烁在很长一段时间内时间会很糟糕。
尖尖的

1
呵呵,我知道眨眼很烦人,但这实际上是有目的的。预计用户不会整天坐在显示器

25
你们好搞笑 网页仅用于你们认为正确的内容?我不想突出显示,我需要眨眼,因为我正在编写要在大型电视上查看的过程监控页面,并且该页面需要闪烁红色并继续,以便引起人们的注意。
Bmo

Answers:


173

您正在寻找jQuery UI Highlight Effect

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

文档和演示可以在这里找到


编辑
也许jQuery UI 脉动效果更合适,请参见此处


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

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

...因此透明度不会低于50%。


1
我正在寻找脉动。非常感谢。只是,有没有办法阻止它完全消失。只是褪色就可以说达到50%的不透明度?也许只是要几次突出显示效果?
ZolaKt 2011年


30

这是我创建的自定义眨眼效果,它使用setIntervalfadeTo

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/


1
效果很好!而且不需要JQuery UI。
帕维尔·弗拉索夫(Favel Vlasov)2015年

很好的解决方案!使用Jquery可以正常工作。谢谢
数字网站

这是最好的解决方案!
DmitryBoyko '16

最好的解决方案在这里!
w3spi

19

如果您尚未使用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

18

对于那些不想包括整个jQuery UI的用户,可以改用jQuery.pulse.js

要具有更改不透明度的循环动画,请执行以下操作:

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

它很轻(小于1kb),并且允许您循环播放任何类型的动画。


1
仍然需要jQuery UI“效果”
Jerome Jaglale 2013年

1
@JeromeJaglale我不使用jQuery UI就使用它,因为不透明度更改可以仅在jQuery中完成。除非您使用的是jQuery UI特定动画,否则它应该与您相同。
卢拉拉拉

1
好点子。我被第一个需要jQuery UI Effects的演示(文本呈红色)迷住了。
杰罗姆·杰格拉勒

请注意。您只需要包括jquery.color.js用于颜色的东西。
戴夫


6

因为我看不到任何不需要额外库的基于jQuery的解决方案,所以这是一个简单的解决方案,比使用fadeIn / fadeOut的解决方案灵活一些。

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

1

我使用不同的预定义颜色,如下所示:

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

像这样使用它们

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

简单 :)


0

如果您不需要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); }
    });
});

0

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

  • 应该可以在所有浏览器上使用,因为只有Javascript和jQuery。

注意:此解决方案不使用jQuery UI,还有一个小提琴,因此您可以在自己的代码中实现它之前按自己的喜好进行操作。


0

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


FadeOut / FadeIn隐藏/显示元素到底是不是我想要的。我需要在不隐藏元素的情况下增加/减少颜色不透明度
ZolaKt 2015年

不,elem.show()。hide()可以做到。FadeOut / FadeIn更改透明度。您可以摆弄淡出/淡入的持续时间以获得所需的效果。虽然它隐藏了一次。
ibsenv


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

0

检查一下-

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

0

我找不到我想要的东西,所以写了一些基本的东西。突出显示的类可能只是背景色。

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
    }
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.