jQuery 高亮 div 几秒钟
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4871595/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
highlight div for few seconds
提问by I-M-JM
I have many div's, when ever I any of the div, its content gets copied to the top most div, but I want to highlight the top most div, how can I do it using jQuery.
我有很多 div，当我使用任何一个 div 时，它的内容都会被复制到最上面的 div，但我想突出显示最上面的 div，我该如何使用 jQuery 做到这一点。
Code:
代码：
<div id="code"> </div>
<div id="1">Click Me</div>
<div id="2">Click Me, please</div>
When I click div either with id 1 or 2, it contents get copied to div with "code" id, but I need to highlight for few seconds, so that I can notify user that something is changed.
当我单击 ID 为 1 或 2 的 div 时，它的内容会被复制到带有“代码”ID 的 div，但我需要突出显示几秒钟，以便我可以通知用户某些内容已更改。
回答by Vivek
回答by Sahan
There is a simple way to achieve this using CSS and jQuery too, Check this out,
也有一种简单的方法可以使用 CSS 和 jQuery 来实现这一点，看看这个，
CSS
CSS
@keyframes highlight {
0% {
background: #ffff99;
}
100% {
background: none;
}
}
.highlight {
animation: highlight 2s;
}
jQuery:
jQuery：
function highlight(){
$('#YourElement').addClass("highlight");
setTimeout(function () {
$('#YourElement').removeClass('highlight');
}, 2000);
}
Use highlight()function in your events.
highlight()在您的活动中使用函数。
回答by Ken Redler
If you're using jQuery UI, you can do this:
如果你使用 jQuery UI，你可以这样做：
$('#code').effect('highlight',{},3000); // three seconds
Separately, your IDs on those lower two elements are invalid. You can't start an ID with a number (except, as Vivek points out, in HTML5). Instead of 1or 2, use something with some semantic value, like answer1or article1.
另外，您在下面两个元素上的 ID 无效。ID 不能以数字开头（除非，正如 Vivek 指出的，在 HTML5 中）。代替1or 2，使用具有某种语义值的东西，例如answer1or article1。
Edit: Here's how to do it using your current HTML, including a click handler for the divs:
编辑：以下是使用当前 HTML 进行操作的方法，包括 div 的单击处理程序：
$('#a1,#a2').click( function(){
$('#code')
.html( $.trim( $(this).text() ) )
.effect('highlight',{},1000);
});
Here it is in action: http://jsfiddle.net/redler/KrhHs/
这是在行动：http: //jsfiddle.net/redler/KrhHs/
回答by Laurent T
very quick and dirty way to do that (5 minutes looking on the documentation :p):
非常快速和肮脏的方式来做到这一点（查看文档 5 分钟：p）：
<script>
$(function() {
//when clicking on all div but not the first one
$("div:not(:first)").click(function() {
//Content of the selected div gets copied to the top one
$("div:first").text($(this).text());
//At the end of the first animation execute the second animation
$("div:first").animate({
opacity:"0.5"
}, 1000, function() {
$("div:first").animate({
opacity:"1"
}, 1000);
});
});
});
</script>
Hope that helps!
希望有帮助！
