Copyright © Mochikit - Javascript Library. All Rights Reserved

MochiKit.Visual: A Simple To Understand Interface

Among the demos of MochiKit, MochiKit.Visual is one of the notable documentations offering animations and visual effects for the HTML elements. It is dependent on other demos like MochiKit.Base, MochiKit.Iter, MochiKit.DOM, MochiKit.Color and MochiKit.Position. While adapting the implementation from Open Rico this demo lets you create rounded corners without any style sheet or external images, with the help of CSS manipulation. All the dynamic effects of MochiKit.Visual are ported through Script Aculo.

Animation Effects

A basic looping feature manages the animated or dynamic effects while taking the current system time in consideration and skipping the effect steps automatically on the execution delays. Within short and regular intervals, during the execution of effects, timers control the effect. Effect classes require only handling dynamic updates according to floating-point ranging from 0.0 to 1.0 which is the effect position. Transitions often manipulate this effect while providing non-linear updates to enhance visual effect. There are Default options for the effect classes and they control transitions and effect timer.

Effects Cue

When a number of effects are being executed at the same time, conflicts can be created by user inputs and the effects. In order to avoid such problems, the Queue Mechanism runs the effects according to your desire. By default, you will have “global” queue with “parallel” effects. Each effect comes up with customizable queue option, the value of which can be string.

  • Front: effect runs before other effects which have not yet started
  • End: effect runs after the finishing of all effects
  • Break: all other effects get finalized immediately after the effect commences
  • Replace: With the starting of the effect, all other effects are cancelled. This is compatible with MochiKit 1.5+
  • Parallel: effect runs with all other effects in parallel way

However, if you have the property keys namely limit, scope and position, you will have more control. There are various API references like roundClass, roundElement, toggle, tagifyText etc and combination effects like appear, fade, blindUp, blindDown, puff, switchOffshake, dropout, slideDown, grow, squish etc.