Yellow fade effect with JQuery

user_2138 0
Viewed 51545

I would like to implement something similar to 37Signals's Yellow Fade effect.

I am using Jquery 1.3.2

The code 

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

and the next call show yellow fade the DOM elment with box id.

$("#box").yellowFade();

But it only makes it yellow. No white background after 15000 milliseconds.

Any idea why it is not working?

Solution

You can use: 

$("#box").effect("highlight", {}, 1500);

But you would need to include:

effects.core.js
effects.highlight.js

jquery
15 Answers
user_1025370 
(function($) {
  $.fn.yellowFade = function() {
    this.animate( { backgroundColor: "#ffffcc" }, 1 ).animate( { backgroundColor: "#ffffff" }, 1500 );
  }
})(jQuery);

Should do the trick. Set it to the yellow, then fade it to white

Admin1

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 jQuery Color Animations.

All the answers here use this plugin but no one mentions it.

T_Pops_3073380

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

First, add the following functions to your script

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)
}

Next, call the function using this:

doBGFade( $(selector),[245,255,159],[255,255,255],'transparent',75,20,4 );

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.

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

Admin1 
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');
              });
}

The line this.style.removeAttribute('filter') is for an anti-aliasing bug in IE.

Now, call YellowFade from wherever, and pass your selector

YellowFade('#myDivId');

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

Take a look at this video

Update: Did you take a look at the video? Forgot to mention this requires the JQuery.Color plugin

Vin_17470

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:

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

then call it with $('.item').faderEffect();

user_382410

YOU NEED ONLY HTML TO DO THIS. No CSS or JS required!

Suppose you have a text on a certain page that you want to temporarily "highlight and show" to users upon visiting the page.

And let the content on that page to be highlighted be a h2 tag and a p tag content as shown below:


<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>

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!

https://stackoverflow.com/questions/848797/yellow-fade-effect-with-jquery/63571443#:~:text=Carbon%20Steel%20for%20Blacksmithing,you%20can%20find%20and%20recycle.

To give a live example: Follow the link given above to see the highlight effect upon the content that I mentioned in the link.

user_128721990
Related