我想实现与37Signals's Yellow Fade effect.
类似的内容我正在使用Jquery 1.3.2
代码
(function($) {
$.fn.yellowFade = function() {
return (this.css({backgroundColor: "#ffffcc"}).animate(
{
backgroundColor: "#ffffff"
}, 1500));
}
})(jQuery);
并且下一个调用show yellow使用 box id淡化DOM元素。
$("#box").yellowFade();
但它只会变黄。 15000毫秒后没有白色背景。
知道为什么它不起作用吗？
解决方案
您可以使用：
$("#box").effect("highlight", {}, 1500);
但你需要包括：
答案 0 :(得分：96)
此函数是jQuery effects.core.js：
的一部分$("#box").effect("highlight", {}, 1500);
正如Steerpike在评论中指出的那样，effects.core.js和effects.highlight.js需要包括在内才能使用它。
答案 1 :(得分：63)
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();
答案 2 :(得分：63)
我很喜欢Sterling Nichols的回答，因为它很轻巧而且不需要插件。但是，我发现它不适用于浮动元素（例如，当元素是“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(); });
});
}
可选
如果您还想匹配元素的border-radius，请使用以下代码：
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(); });
});
}
答案 3 :(得分：8)
(function($) {
$.fn.yellowFade = function() {
this.animate( { backgroundColor: "#ffffcc" }, 1 ).animate( { backgroundColor: "#ffffff" }, 1500 );
}
})(jQuery);
应该做的伎俩。将其设置为黄色，然后将其淡化为白色
答案 4 :(得分：7)
我刚刚解决了一个与我正在进行的项目类似的问题。默认情况下，animate函数无法为颜色设置动画。尝试加入jQuery Color Animations。
这里的所有答案都使用这个插件，但没有人提到它。
答案 5 :(得分：7)
按如下方式定义CSS：
@-webkit-keyframes yellowfade {
from { background: yellow; }
to { background: transparent; }
}
@-moz-keyframes yellowfade {
from { background: yellow; }
to { background: transparent; }
}
.yft {
-webkit-animation: yellowfade 1.5s;
-moz-animation: yellowfade 1.5s;
animation: yellowfade 1.5s;
}
只需将课程yft添加到任何项$('.some-item').addClass('yft')
答案 6 :(得分：3)
实际上，我的解决方案只需要jQuery 1.3x，而且没有aditionnal插件。
首先，将以下功能添加到脚本
function easeInOut(minValue,maxValue,totalSteps,actualStep,powr) {
var delta = maxValue - minValue;
var stepp = minValue+(Math.pow(((1 / totalSteps)*actualStep),powr)*delta);
return Math.ceil(stepp)
}
function doBGFade(elem,startRGB,endRGB,finalColor,steps,intervals,powr) {
if (elem.bgFadeInt) window.clearInterval(elem.bgFadeInt);
var actStep = 0;
elem.bgFadeInt = window.setInterval(
function() {
elem.css("backgroundColor", "rgb("+
easeInOut(startRGB[0],endRGB[0],steps,actStep,powr)+","+
easeInOut(startRGB[1],endRGB[1],steps,actStep,powr)+","+
easeInOut(startRGB[2],endRGB[2],steps,actStep,powr)+")"
);
actStep++;
if (actStep > steps) {
elem.css("backgroundColor", finalColor);
window.clearInterval(elem.bgFadeInt);
}
}
,intervals)
}
接下来，使用以下方法调用该函数：
doBGFade( $(selector),[245,255,159],[255,255,255],'transparent',75,20,4 );
我会让你猜测参数，它们非常自我解释。说实话，脚本不是来自我，我把它放在一个页面然后改变它，以便它与最新的jQuery一起工作。
注意：在firefox 3和6上测试（是的，它也适用于那个旧的东西）
答案 7 :(得分：2)
function YellowFade(selector){
$(selector)
.css('opacity', 0)
.animate({ backgroundColor: 'Yellow', opacity: 1.0 }, 1000)
.animate({ backgroundColor: '#ffffff', opacity: 0.0}, 350, function() {
this.style.removeAttribute('filter');
});
}
行this.style.removeAttribute('filter')用于IE中的抗锯齿错误。
现在，从任何地方调用YellowFade，然后传递选择器
YellowFade('#myDivId');
信用：Phil Haack有一个演示，展示了如何做到这一点。他正在做一个关于JQuery和ASPNet MVC的演示。
更新：你看了一下视频吗？忘记提及这需要JQuery.Color plugin
答案 8 :(得分：2)
我讨厌添加23kb只是为了添加effects.core.js和effects.highlight.js所以我写了以下内容。它通过使用fadeIn（它是jQuery本身的一部分）来模拟行为，以“闪现”元素：
$.fn.faderEffect = function(options){
options = jQuery.extend({
count: 3, // how many times to fadein
speed: 500, // spped of fadein
callback: false // call when done
}, options);
return this.each(function(){
// if we're done, do the callback
if (0 == options.count)
{
if ( $.isFunction(options.callback) ) options.callback.call(this);
return;
}
// hide so we can fade in
if ( $(this).is(':visible') ) $(this).hide();
// fade in, and call again
$(this).fadeIn(options.speed, function(){
options.count = options.count - 1; // countdown
$(this).faderEffect(options);
});
});
}
然后用$（'。item'）调用它.faderEffect（）;
答案 9 :(得分：2)
这是我解决问题的方法。它很棒。它通过了jslint错误验证，在IE8和IE9中也运行良好。当然你可以调整它来接受颜色代码和回调：
jQuery.fn.highlight = function(level) {
highlightIn = function(options){
var el = options.el;
var visible = options.visible !== undefined ? options.visible : true;
setTimeout(function(){
if (visible) {
el.css('background-color', 'rgba('+[255, 64, 64]+','+options.iteration/10+')');
if (options.iteration/10 < 1) {
options.iteration += 2;
highlightIn(options);
}
} else {
el.css('background-color', 'rgba('+[255, 64, 64]+','+options.iteration/10+')');
if (options.iteration/10 > 0) {
options.iteration -= 2;
highlightIn(options);
} else {
el.css('background-color', '#fff');
}
}
}, 50);
};
highlightOut = function(options) {
options.visible = false;
highlightIn(options);
};
level = typeof level !== 'undefined' ? level : 'warning';
highlightIn({'iteration': 1, 'el': $(this), 'color': level});
highlightOut({'iteration': 10, 'el': $(this), 'color': level});
};
答案 10 :(得分：1)
这是一个非jQuery选项，可用于淡入淡出效果。在数组“颜色”中，您可以添加从初始颜色到最后颜色所需的过渡颜色。您可以根据需要添加尽可能多的颜色。
<html lang="en">
<head>
<script type="text/javascript">
//###Face Effect for a text box#######
var targetColor;
var interval1;
var interval2;
var i=0;
var colors = ["#FFFF00","#FFFF33","#FFFF66","#FFFF99","#FFFFCC","#FFFFFF"];
function changeColor(){
if (i<colors.length){
document.getElementById("p1").style.backgroundColor=colors[i];
i++;
}
else{
window.clearInterval(interval1);
i=0;
}
}
addEventListener("load",function(){
document.getElementById("p1").addEventListener("click",function(e){
interval1=setInterval("changeColor()",80);
})
});
</script>
</head>
<body>
<p id="p1">Click this text box to see the fade effect</p>
<footer>
<p>By Jefrey Bulla</p>
</footer>
</div>
</body>
</html>
答案 11 :(得分：0)
如果你想尝试一种不依赖于jQuery UI .effect的替代黄色渐变技术，你可以在你的内容后面放置一个黄色（或另一种颜色）div并使用jQuery .fadeOut（）。
<div class="yft">
<div class="content">This is some content</div>
<div class="yft_fade"> </div>
</div>
<style>
.yft_fade {
background-color:yellow;
display:none;
}
.content {
position:absolute;
top:0px;
}
</style>
<script>
$(document).ready(function() {
$(".yft").click(function() {
$(this).find(".yft_fade").show().fadeOut();
});
});
</script>
答案 12 :(得分：0)
我只是用...
<style>
tr.highlight {
background: #fffec6;
}
</style>
<script>
//on page load, add class
$(window).load(function() {
$("tr.table-item-id").addClass("highlight", 1200);
});
//fade out class
setTimeout(function(){
$("tr.table-item-id").removeClass("highlight", 1200);
}, 5200);
</script>
答案 13 :(得分：0)
“黄色淡出”的简单/原始脚本，除了jquery本身之外没有插件。只需在计时器中使用rgb（255,255，highlightcolor）设置背景：
<script>
$(document).ready(function () {
yellowFadeout();
});
function yellowFadeout() {
if (typeof (yellowFadeout.timer) == "undefined")
yellowFadeout.timer = setInterval(yellowFadeout, 50);
if (typeof (yellowFadeout.highlightColor) == "undefined")
yellowFadeout.highlightColor = 0;
$(".highlight").css('background', 'rgb(255,255,' + yellowFadeout.highlightColor + ')');
yellowFadeout.highlightColor += 10;
if (yellowFadeout.highlightColor >= 255) {
$(".highlight").css('background','');
clearInterval(yellowFadeout.timer);
}
}
</script>
答案 14 :(得分：0)
您仅需要HTML即可执行此操作。不需要CSS或JS！
假设您要在某个页面上临时向用户访问时向用户“突出显示”文本。
并使该页面上要突出显示的内容为h2标签和p标签内容，如下所示：
<h2>Carbon Steel for Blacksmithing</h2>
<p>The vast majority of blacksmithing uses low and medium carbon steels. High carbon steel, sometimes called “carbon tool steel,” is very hard, and difficult to bend or weld; it gets very brittle once it’s been heat-treated.</p>
<p>You can buy steel, or you can find and recycle. I prefer the later.</p>
在下面给出：一个链接将实际突出显示上面显示的内容。每当用户单击此链接时，他们都会重定向到页面到内容所在的相同位置，并且文本突出显示！
https://stackoverflow.com/questions/848797/yellow-fade-effect-with-jquery/63571443#:~:text=Carbon%20Steel%20for%20Blacksmithing,you%20can%20find%20and%20recycle.
举个例子：按照上面给出的链接，查看对链接中提到的内容的突出影响。