我正在寻找一种方法来做到以下几点。
我在页面中添加了一个<div>，并且ajax回调返回了一些值。 <div>充满了来自ajax调用的值，然后<div>被添加到另一个<div>，它充当表格列。
我想引起用户的注意，向他/他表明页面上有新内容。
我希望<div>闪烁，而不是显示/隐藏，但要高亮/不亮一段时间，让我们说5秒钟。
我一直在看blink插件，但据我所知，它只显示/隐藏在一个元素上。
顺便说一句，解决方案必须是跨浏览器，是的，不幸的是IE包括在内。我可能不得不破解一点，让它在IE中工作，但总的来说它必须工作。
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％的不透明度。
我想你可以使用我给出的类似答案。你可以在这里找到它... https://stackoverflow.com/a/19083993/2063096
注意：此解决方案不使用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://jqueryui.com/demos/effect/。它有一个名为pulsate的效果，可以完全按照你的意愿行事。
$("#trigger").change(function() {$("#div_you_want_to_blink").effect("pulsate");});
这是我创建的自定义闪烁效果，它使用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代替。
要获得更改不透明度的循环动画，请执行以下操作：
$('#target').pulse({opacity: 0.8}, {duration : 100, pulses : 5});
它很轻（小于1kb），允许你循环任何类型的动画。
如果您尚未使用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的解决方案，这里不需要额外的库，这是一个比使用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); }
});
});