Thanks for the tip ;D On 7/29/07, Michael Geary <[EMAIL PROTECTED]> wrote: > > > 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 > >
-- []´s Jean www.suissa.info Ethereal Agency www.etherealagency.com
