Yellow fade effect with JQuery

Question

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

I am using Jquery 1.3.2

The code

(function($) {
   $.fn.yell         


        

Answer 1

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().

http://jsfiddle.net/yFJzn/2/

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

Answer 2

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

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

Answer 3

Define your CSS as follows:

@-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;
}

And just add the class yft to any item $('.some-item').addClass('yft')

Demo: http://jsfiddle.net/Q8KVC/528/