AN7effects
iaian7 » code » webcode John Einselen, 18.07.07 (updated 10.04.11)AN7effects is a collection of simple MooTools scripts for adding link effects and various content toggles to a website.
linkFade
linkFade('a');
linkFade takes the collection of elements specified (in this case, all <a> tags) and applies a simple fade in/out when the mouse hovers.
<a href="...">link text (hover)</a>
By changing 'a' to '.thumb' you can use the effect on any object with a class. You can also specify multiple selectors with a comma separated list, such as 'a, .thumb'.
...<img class="thumb" src="..." />...
contentFade
contentFade('.fade', '.hide');
contentFade requires two selectors; one to define the hover region, and the other to define the hidden content within that region.
<div class="fade"> <a>content (hover) </a> <span class="hide"> hidden text</span> </div>
contentSlide
contentSlide('.slide', '.toggle', '.fade');
contentSlide needs three selectors; the containing element, the hidden content, and the toggle link. This seems to be the easiest way to apply the effect, and allows you to place the hidden content before or after the toggle link.
<div class="slide"> <a class="toggle">toggle (click)</a> <div class="hide">hidden text</div> </div>
download
1 version 1.4 (under 2kb) for Mootools 1.2
Mootools javascript library,
AN7effects requires the main installation and the Slide plugin.
legacy
1 version 1.2 (under 2kb) for Mootools 1.11
Where is this “Slide plugin” you say AN7effects requires?
Thanks. I got it working, but I noticed that the first time I hover over fading images on my page, they flicker. Subsequent hovers are smooth and flicker-free. However, on your pages, they don’t flicker. Am I doing something wrong?
good work! one question… if I don’t want a linkfade but contentslide… how can I disable linkfade. thx. gerry
mediaboxAdvanced
I’m experiencing an issue with Safari where if the user clicks on the toggle button before the page has loaded, the content appears blank. Please visit xcelchurch.com to see the result.