使用JQuery实现黄色淡入淡出效果
使用JQuery实现黄色淡入淡出效果
提问于 2009-05-11 16:03:38
我想实现类似于37Signals's Yellow Fade effect.的东西
我使用的是Jquery 1.3.2
代码
(function($) {
$.fn.yellowFade = function() {
return (this.css({backgroundColor: "#ffffcc"}).animate(
{
backgroundColor: "#ffffff"
}, 1500));
}
})(jQuery);下一次调用显示为黄色，淡出带有box id的DOM元素。
$("#box").yellowFade();但这只会让它变黄。15000毫秒后没有白色背景。
你知道为什么它不工作吗？
解决方案
您可以使用：
$("#box").effect("highlight", {}, 1500);但您需要包含以下内容：
回答 15
Stack Overflow用户
回答已采纳
发布于 2009-05-11 16:07:33
此函数是jQuery effects.core.js的一部分：
$("#box").effect("highlight", {}, 1500);正如Steerpike在评论中指出的那样，为了使用这一点，需要包括effects.core.js和effects.highlight.js。
Stack Overflow用户
发布于 2012-10-28 13:47:29
我喜欢Sterling Nichols answer，因为它是轻量级的，不需要插件。然而，我发现它不适用于浮动元素(例如，当元素为“float:right”时)。所以我重写了代码，无论元素在页面上的位置如何，都可以正确地显示突出显示：
jQuery.fn.highlight = function () {
$(this).each(function () {
var el = $(this);
$("<div/>")
.width(el.outerWidth())
.height(el.outerHeight())
.css({
"position": "absolute",
"left": el.offset().left,
"top": el.offset().top,
"background-color": "#ffff99",
"opacity": ".7",
"z-index": "9999999"
}).appendTo('body').fadeOut(1000).queue(function () { $(this).remove(); });
});
}可选：
如果您还希望匹配元素的边界半径，请使用以下代码：
jQuery.fn.highlight = function () {
$(this).each(function () {
var el = $(this);
$("<div/>")
.width(el.outerWidth())
.height(el.outerHeight())
.css({
"position": "absolute",
"left": el.offset().left,
"top": el.offset().top,
"background-color": "#ffff99",
"opacity": ".7",
"z-index": "9999999",
"border-top-left-radius": parseInt(el.css("borderTopLeftRadius"), 10),
"border-top-right-radius": parseInt(el.css("borderTopRightRadius"), 10),
"border-bottom-left-radius": parseInt(el.css("borderBottomLeftRadius"), 10),
"border-bottom-right-radius": parseInt(el.css("borderBottomRightRadius"), 10)
}).appendTo('body').fadeOut(1000).queue(function () { $(this).remove(); });
});
}Stack Overflow用户
发布于 2012-07-21 12:05:22
jQuery效果库给你的应用程序增加了很多不必要的开销。您只需使用jQuery即可完成相同的任务。http://jsfiddle.net/x2jrU/92/
jQuery.fn.highlight = function() {
$(this).each(function() {
var el = $(this);
el.before("<div/>")
el.prev()
.width(el.width())
.height(el.height())
.css({
"position": "absolute",
"background-color": "#ffff99",
"opacity": ".9"
})
.fadeOut(500);
});
}
$("#target").highlight();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/848797
复制相关文章
相似问题