[jQuery] Re: interesting JS "animation", candidate for jQuery plugin

[Michael Geary]

> From: Stephan Beal
> 
> i just came across this by accident and thought it might 
> interest some plugin author enough to write a similar feature 
> for jQuery:
> 
> http://imdb.com/title/tt0084787/faq
> 
> scroll way down, or search for "Are there any deleted scenes 
> for this movie?", and look for the red text which says 
> "Spoilers!". It is an effect which hides certain text until 
> you mouse over it, at which point the real text is revealed. 
> The intention is to keep people from accidentally seeing text 
> which might spoil a film for them (i.e.
> reveal more information than they might want to know before 
> seeing the film).

That's pretty neat. The code uses MooTools and would be trivial to port to
jQuery. Here are the relevant bits from the MooTools code:

HTML:

   <span class="spoiler">
      <span> a shot of the camp ... </span>
   </span>

CSS:

   .spoiler {
      background-image:url(/images/spoilers.gif);
      border:1px solid red;
   }

   .spoiler.hover { 
      background-image: none;
      border: none;
   }

   .spoiler.hover span { 
      visibility: visible;
   }

JS:

   $$('.spoiler').each(this.spoiler.bind(this));

   'spoiler':
    function(element) {
      element.onmouseover = function() { Element.addClass(this, 'hover') };
      element.onmouseout = function() { Element.removeClass(this, 'hover')
};
    },

I would use the hoverIntent plugin to improve on the MooTools code by only
revealing the text when you actually rest the mouse on a spoiler.

You don't really need a separate plugin for the spoiler effect, you could
just use this code (untested):

   $(function() {
      $('.spoiler').hoverIntent(
         function() { $(this).addClass( 'hover' ); },
         function() { $(this).removeClass( 'hover' ); }
      );
   });

(I seem to think there is even a shorter way to write this
addClass/removeClass pattern, but it's too early in the morning for me to
remember it...)

-Mike