AN7effects
iaian7 » code » webcode John Einselen, 18.07.07AN7effects is a collection of simple MooTools scripts for adding link effects and 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
an7effects14.js version 1.4 (under 2kb) for Mootools 1.2
Mootools javascript library,
AN7effects requires the main installation and the Slide plugin.
legacy
an7effects12.js 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?
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.