blocks|key|3326603|text|此函数是jQuery+effects.core.js的一部分：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3326604|$("#box").effect("highlight",+{},+1500);|code-block|syntax|javascript|3326605|正如Steerpike在评论中指出的那样，为了使用这一点，需要包括effects.core.js和effects.highlight.js。|3326606|entityMap|0|LINK|mutability|MUTABLE|url|http://view.jquery.com/tags/ui/latest/ui/effects.core.js|1|http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js|2|http://dev.jquery.com/view/tags/ui/latest/ui/effects.highlight.js^0|B|F|0|0|0|X|F|1|1D|K|2|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]|$A|15|B|16|1|17]]|C|$]]|$1|K|3|-4|5|6|7|18|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]|U|$5|N|O|P|C|$Q|V]]]]

<p>This function is part of jQuery <a href="http://view.jquery.com/tags/ui/latest/ui/effects.core.js" rel="noreferrer">effects.core.js</a> :</p>

<pre><code>$("#box").effect("highlight", {}, 1500);
</code></pre>

<p>As Steerpike pointed out in the comments, <a href="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js" rel="noreferrer" title="effects.core.js">effects.core.js</a> and <a href="http://dev.jquery.com/view/tags/ui/latest/ui/effects.highlight.js" rel="noreferrer" title="effects.highlight.js">effects.highlight.js</a> need to be included in order to use this.</p>


blocks|key|340691|text|(function($)+{
++$.fn.yellowFade+=+function()+{
++++this.animate(+{+backgroundColor:+"#ffffcc"+},+1+).animate(+{+backgroundColor:+"#ffffff"+},+1500+);
++}
})(jQuery);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|340692|应该能行得通。将其设置为黄色，然后将其淡入白色|unstyled|340693|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>(function($) {
  $.fn.yellowFade = function() {
    this.animate( { backgroundColor: "#ffffcc" }, 1 ).animate( { backgroundColor: "#ffffff" }, 1500 );
  }
})(jQuery);
</code></pre>

<p>Should do the trick.  Set it to the yellow, then fade it to white</p>


blocks|key|340713|text|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');
++++++++++++++});
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|340714|this.style.removeAttribute('filter')行是针对IE中的反锯齿错误的。|unstyled|offset|length|style|CODE|340715|现在，从任何地方调用YellowFade，并传递您的选择器|340716|YellowFade('#myDivId');|340717|Credit：Phil+Haack有一个演示，展示了如何做到这一点。他正在做一个关于JQuery和ASPNet+MVC的演示。|BOLD|340718|Take+a+look+at+this+video|340719|更新：你看过视频了吗？忘记提到这需要JQuery.Color+plugin|340720|entityMap|0|LINK|mutability|MUTABLE|url|http://www.aspnetpodcast.com/VideoFiles/ASPNETPodcast20080727-MVCWithPhilHaack.wmv|1|http://plugins.jquery.com/files/jquery.color.js.txt^0|0|0|10|0|0|0|0|6|0|0|P|0|0|0|2|I|J|1|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|16|8|@$G|17|H|18|I|J]]|9|@]|A|$]]|$1|K|3|L|5|F|7|19|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1A|8|@]|9|@]|A|$B|C]]|$1|O|3|P|5|F|7|1B|8|@$G|1C|H|1D|I|Q]]|9|@]|A|$]]|$1|R|3|S|5|F|7|1E|8|@]|9|@$G|1F|H|1G|1|1H]]|A|$]]|$1|T|3|U|5|F|7|1I|8|@$G|1J|H|1K|I|Q]]|9|@$G|1L|H|1M|1|1N]]|A|$]]|$1|V|3|-4|5|F|7|1O|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]|13|$5|Y|Z|10|A|$11|14]]]]

<pre><code>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');
              });
}
</code></pre>

<p>The line <code>this.style.removeAttribute('filter')</code> is for an anti-aliasing bug in IE.</p>

<p>Now, call YellowFade from wherever, and pass your selector</p>

<pre><code>YellowFade('#myDivId');
</code></pre>

<p><strong>Credit</strong>: Phil Haack had a demo showing exactly how to do this. He was doing a demo on JQuery and ASPNet MVC.</p>

<p><a href="http://www.aspnetpodcast.com/VideoFiles/ASPNETPodcast20080727-MVCWithPhilHaack.wmv" rel="nofollow noreferrer">Take a look at this video</a></p>

<p><strong>Update</strong>: Did you take a look at the video? Forgot to mention this requires the <a href="http://plugins.jquery.com/files/jquery.color.js.txt" rel="nofollow noreferrer">JQuery.Color plugin</a></p>


blocks|key|342920|text|我刚刚在我正在做的一个项目中解决了一个类似的问题。默认情况下，动画功能不能设置颜色动画。尝试包含jQuery+Color+Animations。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|342921|这里的所有答案都使用了这个插件，但没有人提到它。|342922|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/jquery/jquery-color^0|1C|N|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

<p>I just solved a problem similar to this on a project I was working on. By default, the animate function cannot animate colors. Try including <a href="https://github.com/jquery/jquery-color" rel="nofollow noreferrer">jQuery Color Animations</a>.</p>

<p>All the answers here use this plugin but no one mentions it.</p>


blocks|key|340730|text|我讨厌仅仅为了添加effects.core.js和effects.highlight.js而添加23kb，所以我写了以下内容。它通过使用fadeIn+(这是jQuery本身的一部分)来‘闪存’元素来模拟该行为：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|340731|$.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);+
++++++++});
++++});
}|code-block|syntax|javascript|340732|然后用$(‘.item’).faderEffect()调用它；|340733|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I hated adding 23kb just to add effects.core.js and effects.highlight.js so I wrote the following. It emulates the behavior by using fadeIn (which is part of jQuery itself) to 'flash' the element:</p>

<pre><code>$.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); 
        });
    });
}
</code></pre>

<p>then call it with $('.item').faderEffect();</p>


blocks|key|342098|text|实际上，我有一个解决方案，只需要jQuery+1.3x，而不需要额外的插件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|342099|首先，将以下函数添加到脚本中|342100|function+easeInOut(minValue,maxValue,totalSteps,actualStep,powr)+{
++++var+delta+=+maxValue+-+minValue;
++++var+stepp+=+minValue%2B(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("%2B
++++++++++++++++easeInOut(startRGB[0],endRGB[0],steps,actStep,powr)%2B","%2B
++++++++++++++++easeInOut(startRGB[1],endRGB[1],steps,actStep,powr)%2B","%2B
++++++++++++++++easeInOut(startRGB[2],endRGB[2],steps,actStep,powr)%2B")"
++++++++++++);
++++++++++++actStep%2B%2B;
++++++++++++if+(actStep+>+steps)+{
++++++++++++elem.css("backgroundColor",+finalColor);
++++++++++++window.clearInterval(elem.bgFadeInt);
++++++++++++}
++++++++}
++++++++,intervals)
}|code-block|syntax|javascript|342101|接下来，使用以下代码调用该函数：|342102|doBGFade(+$(selector),[245,255,159],[255,255,255],'transparent',75,20,4+);|342103|我让你猜猜参数，它们是不言而喻的。老实说，这个脚本不是我写的，我把它放在一个页面上，然后把它改了，这样它就可以和最新的jQuery一起工作了。|342104|注:在Firefox3和ie6上测试过(是的，它也适用于旧的东西)|342105|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Actually, I have a solution that only needs jQuery 1.3x, and no aditionnal plugin.</p>

<p>First, add the following functions to your script</p>

<pre><code>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 &gt; steps) {
            elem.css("backgroundColor", finalColor);
            window.clearInterval(elem.bgFadeInt);
            }
        }
        ,intervals)
}
</code></pre>

<p>Next, call the function using this:</p>

<pre><code>doBGFade( $(selector),[245,255,159],[255,255,255],'transparent',75,20,4 );
</code></pre>

<p>I'll let you guess the parameters, they are pretty self explanatory. To be honest the script is not from me, I took it on a page then changed it so it works with the latest jQuery.</p>

<p>NB: tested on firefox 3 and ie 6 (yes it works on that old thing too)</p>


blocks|key|342111|text|这是一个非jQuery选项，您可以将其用于颜色淡出效果。在"+colors“数组中，添加从初始颜色到最后一种颜色所需的过渡颜色。您可以根据需要添加任意数量的颜色。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|342112|+++<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%2B%2B;
++++}+
++++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>+|code-block|syntax|javascript|342113|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This is a non-jQuery option you can use for the color fade effect. In the array "colors", you add the transition colors you need from the initial color until the last color. You can add as much colors as you want. </p>

<pre><code>   &lt;html lang="en"&gt;
   &lt;head&gt;
   &lt;script type="text/javascript"&gt;
  //###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&lt;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);              

    })
});
&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;
&lt;p id="p1"&gt;Click this text box to see the fade effect&lt;/p&gt;

&lt;footer&gt;
 &lt;p&gt;By Jefrey Bulla&lt;/p&gt;
&lt;/footer&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt; 
</code></pre>


blocks|key|3113983|text|如果您想尝试另一种不依赖于jQuery+UI+.effect的黄色淡入淡出技术，您可以在内容后面放置一个黄色(或另一种颜色)+div并使用jQuery+.fadeOut()。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3113984|http://jsfiddle.net/yFJzn/2/|offset|length|3113985|<div+class="yft">
++++<div+class="content">This+is+some+content</div>
++++<div+class="yft_fade">&nbsp;</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>|code-block|syntax|javascript|3113986|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|S|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

<p>If you'd like to try an alternative yellow fade technique that does not depend on jQuery UI .effect, you could position a yellow (or another color) div behind your content and use the jQuery .fadeOut().</p>

<p><a href="http://jsfiddle.net/yFJzn/2/" rel="nofollow">http://jsfiddle.net/yFJzn/2/</a></p>

<pre><code>&lt;div class="yft"&gt;
    &lt;div class="content"&gt;This is some content&lt;/div&gt;
    &lt;div class="yft_fade"&gt;&amp;nbsp;&lt;/div&gt;
&lt;/div&gt;

&lt;style&gt;
  .yft_fade {
      background-color:yellow;
      display:none;
  }
  .content {
      position:absolute;
      top:0px;
  }
&lt;/style&gt;

&lt;script&gt;
  $(document).ready(function() {
      $(".yft").click(function() {
          $(this).find(".yft_fade").show().fadeOut();
      });
  });​
&lt;/script&gt;
</code></pre>


blocks|key|3113991|text|jQuery效果库给你的应用程序增加了很多不必要的开销。您只需使用jQuery即可完成相同的任务。http://jsfiddle.net/x2jrU/92/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3113992|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();|code-block|syntax|javascript|3113993|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/x2jrU/92/^0|1D|T|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>The jQuery effects library adds quite a bit of unneeded overhead to your app.  You can accomplish the same thing with jQuery only.  <a href="http://jsfiddle.net/x2jrU/92/">http://jsfiddle.net/x2jrU/92/</a></p>

<pre><code>jQuery.fn.highlight = function() {
   $(this).each(function() {
        var el = $(this);
        el.before("&lt;div/&gt;")
        el.prev()
            .width(el.width())
            .height(el.height())
            .css({
                "position": "absolute",
                "background-color": "#ffff99",
                "opacity": ".9"   
            })
            .fadeOut(500);
    });
}

$("#target").highlight();
</code></pre>


blocks|key|345653|text|我喜欢Sterling+Nichols+answer，因为它是轻量级的，不需要插件。然而，我发现它不适用于浮动元素(例如，当元素为“float:right”时)。所以我重写了代码，无论元素在页面上的位置如何，都可以正确地显示突出显示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|345654|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();+});
++++});
}|code-block|syntax|javascript|345655|可选：|offset|length|style|BOLD|345656|如果您还希望匹配元素的边界半径，请使用以下代码：|345657|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();+});
++++});
}|345658|entityMap^0|0|0|0|3|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>I loved Sterling Nichols answer, since it was lightweight and didn't require a plugin. However, I discovered it didn't work with floating elements (i.e. such as when the element is "float:right"). So I re-wrote the code to display the highlight properly no matter how the element is positioned on the page:</p>

<pre><code>jQuery.fn.highlight = function () {
    $(this).each(function () {
        var el = $(this);
        $("&lt;div/&gt;")
        .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(); });
    });
}
</code></pre>

<p><strong>Optional:</strong><br>
Use the following code if you also want to match the border-radius of the element:</p>

<pre><code>jQuery.fn.highlight = function () {
    $(this).each(function () {
        var el = $(this);
        $("&lt;div/&gt;")
        .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(); });
    });
}
</code></pre>


blocks|key|340782|text|这是我对这个问题的解决方案。它的效果非常好。它通过了jslint错误验证，在IE8和IE9中也能正常工作。当然，您可以调整它以接受颜色代码和回调：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|340783|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('%2B[255,+64,+64]%2B','%2Boptions.iteration/10%2B')');
++++++++if+(options.iteration/10+<+1)+{
++++++++++options.iteration+%2B=+2;
++++++++++highlightIn(options);
++++++++}
++++++}+else+{
++++++++el.css('background-color',+'rgba('%2B[255,+64,+64]%2B','%2Boptions.iteration/10%2B')');
++++++++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});
};|code-block|syntax|javascript|340784|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>this is my solution for the problem. it works excelent. it passes jslint error validation and also works decent in IE8 and IE9. Of course you can tweak it to accept color codes and callbacks:</p>

<pre><code>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 &lt; 1) {
          options.iteration += 2;
          highlightIn(options);
        }
      } else {
        el.css('background-color', 'rgba('+[255, 64, 64]+','+options.iteration/10+')');
        if (options.iteration/10 &gt; 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});
};
</code></pre>


blocks|key|342997|text|我只是用了..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|342998|<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>|code-block|syntax|javascript|342999|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I simply used...</p>

<pre><code>&lt;style&gt;
tr.highlight {
background: #fffec6;
}
&lt;/style&gt;


&lt;script&gt;
//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);

&lt;/script&gt;
</code></pre>


blocks|key|345695|text|一个用于“黄色淡出”的简单/原始脚本，除了jquery本身的之外，没有任何插件。只需在计时器中使用rgb(255,255，荧光颜色)设置背景：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|345696|<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,'+%2B+yellowFadeout.highlightColor+%2B+')');
++++++++yellowFadeout.highlightColor+%2B=+10;
++++++++if+(yellowFadeout.highlightColor+>=+255)+{
++++++++++++$(".highlight").css('background','');
++++++++++++clearInterval(yellowFadeout.timer);
++++++++}
++++}
</script>|code-block|syntax|javascript|345697|entityMap^0|X|12|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>A simple/raw script for a "yellow fadeout", <strong>no plugins except jquery itself</strong>. Just setting background with rgb(255,255,highlightcolor) in a timer:</p>

<pre><code>&lt;script&gt;

    $(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 &gt;= 255) {
            $(".highlight").css('background','');
            clearInterval(yellowFadeout.timer);
        }
    }
&lt;/script&gt;
</code></pre>


blocks|key|345702|text|按如下方式定义CSS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|345703|@-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;
}|code-block|syntax|javascript|345704|只需将类yft添加到任何项$('.some-item').addClass('yft')|offset|length|style|CODE|345705|演示：http://jsfiddle.net/Q8KVC/528/|345706|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Q8KVC/528/^0|0|0|4|3|D|V|0|3|U|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]|$I|11|J|12|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@$I|14|J|15|1|16]]|A|$]]|$1|O|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>Define your CSS as follows:</p>

<pre><code>@-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;
}
</code></pre>

<p>And just add the class <code>yft</code> to any item <code>$('.some-item').addClass('yft')</code></p>

<p>Demo: <a href="http://jsfiddle.net/Q8KVC/528/" rel="noreferrer">http://jsfiddle.net/Q8KVC/528/</a></p>


blocks|key|3326960|text|你只需要来做这件事。不需要CSS或JS！|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3326961|假设您在某个页面上有一个文本，您希望在访问该页面时临时“突出显示”给用户。|3326962|并将该页面上要突出显示的内容设置为h2标记和p标记内容，如下所示：|3326963|<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>|code-block|syntax|javascript|3326964|如下所示:一个实际上会突出显示上面所示内容的链接。每当用户单击此链接时...它们被重定向到页面内容所在的相同位置，并且文本也会突出显示！|3326965|https://stackoverflow.com/questions/848797/yellow-fade-effect-with-jquery/63571443#:~:text=Carbon%2520Steel%2520for%2520Blacksmithing,you%2520can%2520find%2520and%2520recycle.|3326966|3326967|+给出一个活生生的例子：按照上面给出的链接查看我在链接中提到的内容的突出显示效果。|blockquote|3326968|3326969|entityMap^0|4|G|0|10|1|0|0|X|0|0|0|1W|0|0|0|1|14|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|18|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1C|8|@]|D|@]|E|$M|N]]|$1|S|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]|$1|T|3|U|5|V|7|1E|8|@$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|Y|$]]

<p><strong>YOU NEED ONLY HTML TO DO THIS. No CSS or JS required!</strong></p>
<p>Suppose you have a text on a certain page that you want to temporarily &quot;highlight and show&quot; to users <strong>upon visiting</strong> the page.</p>
<p>And let the content on that page to be highlighted be a h2 tag and a p tag content as shown below:</p>
<pre class="lang-html prettyprint-override"><code>
&lt;h2&gt;Carbon Steel for Blacksmithing&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;You can buy steel, or you can find and recycle. I prefer the later.&lt;/p&gt;

</code></pre>
<p>Given below: a link that will ACTUALLY highlight the content that is shown above. Whenever a user clicks this link... they get redirected to the page to the same spot where where the content is, and also the text is highlighted!</p>
<pre><code>https://stackoverflow.com/questions/848797/yellow-fade-effect-with-jquery/63571443#:~:text=Carbon%20Steel%20for%20Blacksmithing,you%20can%20find%20and%20recycle.
</code></pre>
<blockquote>
<p><strong>To give a live example:</strong> Follow the link given above to see the highlight effect upon the content that I mentioned in the link.</p>
</blockquote>


<p>I would like to implement something similar to <a href="http://www.37signals.com/svn/archives/000558.php" rel="noreferrer">37Signals's Yellow Fade effect.</a></p>

<p>I am using Jquery 1.3.2</p>

<p>The code </p>

<pre><code>(function($) {
   $.fn.yellowFade = function() {
    return (this.css({backgroundColor: "#ffffcc"}).animate(
            {
                backgroundColor: "#ffffff"
            }, 1500));
   }
 })(jQuery);
</code></pre>

<p>and the next call show yellow fade the DOM elment with <em>box</em> id.</p>

<pre><code>$("#box").yellowFade();
</code></pre>

<p>But it only makes it yellow. No white background after 15000 milliseconds.</p>

<p>Any idea why it is not working?</p>

<p><strong>Solution</strong></p>

<p>You can use: </p>

<pre><code>$("#box").effect("highlight", {}, 1500);
</code></pre>

<p>But you would need to include:</p>

<p><a href="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js" rel="noreferrer">effects.core.js</a><br>
<a href="http://dev.jquery.com/view/tags/ui/latest/ui/effects.highlight.js" rel="noreferrer">effects.highlight.js</a></p>


Yellow fade effect with JQuery

jQuery

我想实现类似于的东西我使用的是Jquery 1.3.2代码(function($) {   $.fn.yellowFade = function() {    return (this.css({backgroundColor: "#ffffcc"}).animate(            {            ...

问使用JQuery实现黄色淡入淡出效果
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JQuery实现黄色淡入淡出效果EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JQuery实现黄色淡入淡出效果
EN