jQuery的“闪烁高亮”效果的div？
我正在寻找一种方法来做到以下几点。
我添加一个<div>到一个页面，并且ajaxcallback返回一些值。 <div>用来自ajax调用的值填充，然后将<div>前置到另一个用作表列的<div> 。
我想获得用户的关注，向他/她展示页面上有新的东西。
我想让<div>闪烁，而不是显示/隐藏，而是突出显示/取消高亮一段时间，让我们说5秒。
我一直在看blink插件，但据我所知，它只显示/隐藏在一个元素上。
顺便说一句，解决scheme必须是跨浏览器，是的，不幸的是包括IE浏览器。 我可能需要一点点才能使它在IE中工作，但总体来说，它必须工作。
jQuery UI亮点效果是你在找什么。
$("div").click(function () { $(this).effect("highlight", {}, 3000); });
文档和演示可以在这里find
编辑
也许脉动效应更合适，请看这里
编辑＃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");});
这是我创build的自定义眨眼效果，它使用setInterval和fadeTo
HTML –
<div id="box">Box</div>
JS –
setInterval(function(){blink()}, 1000); function blink() { $("#box").fadeTo(100, 0.1).fadeTo(200, 1.0); }
尽可能简单。
对于那些不想包含整个jQuery UI的人，可以使用jQuery.pulse.js代替。
要使不透明度变化的循环animation，请执行以下操作：
$('#target').pulse({opacity: 0.8}, {duration : 100, pulses : 5});
它是轻的（小于1kb），并允许您循环任何types的animation。
如果你还没有使用Jquery UI库，你想模仿效果，你可以做的很简单
$('#blinkElement').fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100);
你也可以玩数字来获得更快或更慢的数字，以更好地适应你的devise。
这也可以是一个全局的jQueryfunction，所以你可以在整个网站使用相同的效果。 还要注意的是，如果你把这个代码放在一个for循环中，你可以有一百万个脉冲，所以你不会被限制在默认值6或者默认值是多less。
你可能想看看jQuery UI。 具体而言，突出效果：
由于我没有看到任何不需要额外库的基于jQuery的解决scheme，这是一个简单的，比那些使用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.
如果你不想要jQuery UI的开销，我最近用.animate()写了一个recursion的解决scheme。 您可以根据需要自定义延迟和颜色。
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); } } }); } }); }
当然你需要color插件来使backgroundColor和.animate()一起工作。 https://github.com/jquery/jquery-color
并提供一点上下文，这就是我所说的。 我需要滚动页面到我的目标股利然后眨眼。
$(window).load(function(){ $('html,body').animate({ scrollTop: $(scrollToId).offset().top - 50 }, { duration: 400, complete: function() { doBlink(scrollToId, 5); } }); });
我想你可以用我给的类似的答案。 你可以在这里find它… https://stackoverflow.com/a/19083993/2063096
- 应该在所有浏览器上工作，因为它只有Javascript和jQuery。
注意：这个解决scheme不使用jQuery UI，也有一个小提琴，所以你可以在你的代码中实现它之前玩你喜欢的。
我使用不同的预定义颜色，如：
theme = { whateverFlashColor: '#ffffaa', whateverElseFlashColor: '#bbffaa', whateverElseThenFlashColor: '#ffffff', };
并像这样使用它们
$('#element').effect("highlight", {color:theme.whateverFlashColor}, 1000);
简单 ：）
只要给elem.fadeOut（10）.fadeIn（10）;
试试jquery.blink.js插件：
https://github.com/webarthur/jquery-blink
<script src="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>
