Question

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

我向页面添加<div>，ajax回调返回一些值。 <div>填充了ajax调用中的值，然后<div>会被添加到另一个<div>，后者充当表列。

我想引起用户的注意，向他/他表明页面上有新内容我希望<div>闪烁，而不是显示/隐藏，但要高亮/不亮一段时间，让我们说5秒钟。

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

顺便说一下，解决方案必须是跨浏览器，是的，不幸的是IE包括在内。我可能不得不破解一点，让它在IE中运行，但总的来说它必须工作。

Answer 1

jQuery UI Highlight Effect是您正在寻找的。

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

可以找到文档和演示here

修改

也许Pulsate效果更合适，请参阅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

看看http://jqueryui.com/demos/effect/。它有一个名为pulsate的效果，可以完全按照你想要的效果。

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

Answer 3

这是我创建的自定义闪烁效果，使用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 4

对于那些不想包含整个jQuery UI的人，可以改用jQuery.pulse.js。

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

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

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

Answer 5

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

您可能想要查看jQuery UI。具体来说，突出效果：

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

Answer 7

由于我没有看到任何基于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.

Answer 8

如果您不想要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 9

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

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

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

Answer 10

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

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

并像这样使用它们

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

简单：）

Answer 11

给elem.fadeOut（10）.fadeIn（10）;

Answer 12

尝试使用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>

#enjoy！

Answer 13

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

查看 -

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

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

---
- hosts: windows
  gather_facts: false
  vars:
    mypropertiesfile: C:\mypropertiesfile.txt
    myconfigfile: C:\myfolder\myconfigfile.txt
  tasks:
    - name: Write to properties file
      win_lineinfile:
        path: "{{ mypropertiesfile }}"
        regexp: '^my.config='
        line: my.config={{ myconfigfile | replace("\\","\\\\") }}

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

15 个答案: