用JQuery淡化黄色效果
我想实现类似于37Signals的Yellow Fade效果的东西。
我正在使用Jquery 1.3.2
代码
(function($) { $.fn.yellowFade = function() { return (this.css({backgroundColor: "#ffffcc"}).animate( { backgroundColor: "#ffffff" }, 1500)); } })(jQuery); 并且下一个呼叫显示黄色使用框 ID淡化DOM元素。
$("#box").yellowFade();
但它只是使它变黄。 15000毫秒后没有白色背景。
任何想法，为什么它不工作？
解
您可以使用：
$("#box").effect("highlight", {}, 1500);
但是你需要包括：
effects.core.js
effects.highlight.js
这个函数是jQuery effects.core.js的一部分：
$("#box").effect("highlight", {}, 1500);
正如Steerpike在评论中指出的，需要包含effects.core.js和effects.highlight.js才能使用它。
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();
我爱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(); }); }); }
可选的：
如果您还想匹配元素的边框半径，请使用以下代码：
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(); }); }); }
(function($) { $.fn.yellowFade = function() { this.animate( { backgroundColor: "#ffffcc" }, 1 ).animate( { backgroundColor: "#ffffff" }, 1500 ); } })(jQuery);
应该做的伎俩。 将其设置为黄色，然后淡化为白色
我刚刚在一个正在进行的项目中解决了类似的问题。 默认情况下，animate函数不能animation颜色。 尝试包括jQuery彩色animation 。
所有的答案在这里使用这个插件，但没有人提到它。
定义你的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')
演示： http : //jsfiddle.net/Q8KVC/528/
其实，我有一个解决scheme，只需要jQuery 1.3x，没有aditionnal插件。
首先，将以下function添加到您的脚本
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的作品。
NB：在Firefox 3和IE 6上testing（是的，它也适用于那个老东西）
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，并通过你的select器
YellowFade('#myDivId');
信用 ：菲尔·哈克有一个演示如何做到这一点。 他正在做一个关于JQuery和ASPNet MVC的演示。
看看这个video
更新 ：你看了video吗？ 忘了提及这个需要JQuery.Color插件
我讨厌添加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（）;
这是我的问题的解决scheme。 它的工作非常好。 它通过jslint错误validation，也在IE8和IE9体面。 当然你可以调整它来接受颜色代码和callback：
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}); };
这是一个非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>
如果您想尝试一种不依赖于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>
我只是用…
<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>
一个“黄色淡出”的简单/原始脚本， 除了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>
