Javascript jQuery"；闪烁的突出显示“；对div的影响？
我正在寻找一种方法来做以下事情 我将Javascript jQuery"；闪烁的突出显示“；对div的影响？,javascript,jquery,css,highlight,effects,Javascript,Jquery,Css,Highlight,Effects,我正在寻找一种方法来做以下事情 我将添加到页面，ajax回调返回一些值。由ajax调用中的值填充，然后将前置到另一个，作为表列 我想引起用户的注意，向她/他显示页面上有新内容。 我希望闪烁，而不是显示/隐藏，而是高亮显示/取消高亮显示一段时间，比方说5秒 我一直在看blink插件，但据我所知，它只在元素上显示/隐藏 顺便说一句，解决方案必须是跨浏览器的，是的，IE不幸包括在内。我可能需要稍微修改一下才能让它在IE中工作，但总的来说它必须工作。突出显示效果是你想要的 $("div").click(
我希望
$("div").click(function () {
$(this).effect("highlight", {}, 3000);
});
编辑：
也许脉动效应更合适，请参见
编辑#2：
要调整不透明度，可以执行以下操作：
$("div").click(function() {
// do fading 3 times
for(i=0;i<3;i++) {
$(this).fadeTo('slow', 0.5).fadeTo('slow', 1.0);
}
});
$（“div”）。单击（函数（）{
//你要洗3次吗
对于（i=0；i您可能需要查看jQuery UI。具体来说，突出显示效果：
看看。它有一个名为“脉动”的效果，可以完全满足您的需要
$("#trigger").change(function() {$("#div_you_want_to_blink").effect("pulsate");});
对于那些不想包含整个jQuery UI的用户，可以使用
要制作更改不透明度的循环动画，请执行以下操作：
$('#target').pulse({opacity: 0.8}, {duration : 100, pulses : 5});
它很轻（小于1kb），允许您循环任何类型的动画。如果您不想占用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（）
。
为了提供一点上下文，我这样称呼它。我需要滚动页面到我的目标div，然后闪烁它
$(window).load(function(){
$('html,body').animate({
scrollTop: $(scrollToId).offset().top - 50
}, {
duration: 400,
complete: function() { doBlink(scrollToId, 5); }
});
});
我想你可以用我给出的类似答案。你可以在这里找到它
- 应该适用于所有浏览器，因为它仅适用于Javascript和jQuery
注意：此解决方案不使用jQuery UI，还有一个提琴，因此在代码中实现它之前，您可以根据自己的喜好进行操作。这是我创建的自定义闪烁效果，它使用setInterval
和fadeTo
HTML-
<div id="box">Box</div>
就这么简单
我使用不同的预定义颜色，例如：
theme = {
whateverFlashColor: '#ffffaa',
whateverElseFlashColor: '#bbffaa',
whateverElseThenFlashColor: '#ffffff',
};
像这样使用它们
$('#element').effect("highlight", {color:theme.whateverFlashColor}, 1000);
$('#element').blink(3); // 3 Times.
简单：）只要给elem.fadeOut（10）.fadeIn（10）；如果您还没有使用Jquery UI库，并且希望模拟效果，那么您可以做的非常简单
$('#blinkElement').fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100);
您还可以使用数字来获得更快或更慢的数字，以更好地适合您的设计
这也可以是一个全局jquery函数，因此您可以在整个站点上使用相同的效果。还请注意，如果将此代码放入for循环中，您可以有100万个脉冲，因此您不受默认值6或默认值的限制
编辑：
将其添加为全局jQuery函数
$.fn.Blink = function (interval = 100, iterate = 1) {
for (i = 1; i <= iterate; i++)
$(this).fadeOut(interval).fadeIn(interval);
}
尝试使用jquery.blink.js插件：
jQuery（'span'）.blink（{color:'white'}，{color:'black'}，50）；
#享受吧！
$（文档）.ready（函数（）{
var计数=0；
做{
$（“#toFlash”）.fadeOut（500）、fadeIn（500）；
计数++；
}while（count<10）；/*设置要闪烁的时间*/
});
查看它-
<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区间b；
$（文档）.ready（函数（）{
$（'#btnclick'）。单击（函数（）{
blinkFont（）；
setTimeout（函数（）{
间隔时间；
clearInterval（间隔b）；
}, 5000);
});
});
函数blinkFont（）{
document.getElementById（“闪烁”）.style.color=“红色”
document.getElementById（“闪烁”）.style.background=“黑色”
intervalA=setTimeout（“blinkFont（）”，500）；
}
函数setblinkFont（）{
document.getElementById（“闪烁”）.style.color=“黑色”
document.getElementById（“闪烁”）.style.background=“红色”
intervalB=setTimeout（“blinkFont（）”，500）；
}
这是闪烁的文本和背景
因为我没有看到任何基于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').effect("highlight", {color:theme.whateverFlashColor}, 1000);
$('#element').blink(3); // 3 Times.
我找不到我想要的东西，所以我写了一些尽可能基本的东西。突出显示的类可能只是背景色
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
}
}
请不要。如果必须的话，只需用高亮效果（）高亮显示它，但不要让它闪烁。@tv我想短暂的两到三次“闪烁”（其中“闪烁”可能是一些微妙的东西，比如动画边框发光或类似的东西）好的，没有刺激性，但是长时间的老式眨眼肯定是不好的。呵呵，我知道眨眼很刺激，但实际上它在这里是有目的的。用户不希望整天坐在显示器旁边，所以他必须看看距离是否有变化。你们这些家伙很搞笑。网页只用于什么你们不认为他们是对的吗？我不想强调，我需要一个眨眼，因为我正在写一个过程监视器页面，在大屏幕电视上观看，它需要闪烁红色并继续，所以人们的眼睛被吸引。可能重复的脉动是我要找的。非常感谢。只是，有没有办法阻止它完全褪色。只是为了褪色，比如说50%的不透明度？也许只是为了链接高亮效果几次？仍然需要jQuery UI“效果”@JeromeJaglale我在没有jQuery UI的情况下使用它，因为不透明度的改变可以在jQuery中单独完成。它应该是
$('#element').blink(3); // 3 Times.
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
}
}