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

2020/11/20 06:22 · jquery ·  · 0评论

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

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

我想引起用户的注意,向他/他表明页面上有新内容。

我希望
<div>按钮闪烁,而不是显示/隐藏,而是突出显示/取消突出显示一段时间,例如5秒钟。

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

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

您正在寻找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%。

看看http://jqueryui.com/demos/effect/它具有名为pulsate的效果,可以完全满足您的要求。

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

这是我创建的自定义眨眼效果,它使用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/

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

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

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

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

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

您可能需要研究jQuery UI。具体来说,突出显示效果:

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

因为我看不到任何不需要额外库的基于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.

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

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

像这样使用它们

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

简单 :)

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

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

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

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

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

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

#请享用!

<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

检查一下-

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

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

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
    }
}
本文地址:http://jquery.askforanswer.com/jqueryduidivdeshanshuotuchuxianshixiaoguo.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!