Like many sites, the scripts here on Iaian7.com are provided free to the community. While I may eventually post a donate button (appreciation is great!), please consider giving a donation instead to the Darfur Wall. It can be as little as $1, honoring one of the perhaps half-million already killed. SaveDarfur.org and World Vision are also bringing global attention and relief efforts to those suffering in Darfur.

Let me know of your support and donations, and I'll keep track of the total funds raised right here!

$49 ~ thank you

AN7effects 18.07.07, John Einselen

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

link text (hover)

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


content (hover) hidden text

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


toggle (click)
hidden text

<div class="slide">
<a class="toggle">toggle (click)</a>
<div class="hide">hidden text</div>
</div>



download

an7effects.js version 1.2 (about 2kb)

Mootools javascript library, AN7effects requires the Base, Class, Native, Element, Window, and Effects modules (in total, less than 30kb).

« comment
bookmark

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.

posted 24.06.08, by Paul