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.

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

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

Paul, 24.06.08

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.

Kris Hunt, 28.03.09

Where is this “Slide plugin” you say AN7effects requires?

Iaian7, 29.03.09

AN7effects requires the Fx.Slide module, part of the MooTools More library.

Kris Hunt, 30.03.09

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?

gerry, 3.07.09

good work! one question… if I don’t want a linkfade but contentslide… how can I disable linkfade. thx. gerry

bookmark