jQuery.animateDialog

Overview

This is a jQuery plugin for css3 animation.

This plugin allows you to show any element with css3 animation effect.

Setup

Link to this plugin's script and css

If you defined your original animation, it should be linked.

<link rel="stylesheet" href="jquery.animateDialog.css" />
<-- You can link to your original animation css.
<link rel="stylesheet" href="jquery.animateDialog.junk.css" />
-->
<script src="jquery.animateDialog.js">

Usage

$("<selector>").animateDialog([message], [options]);

This plugin takes two parameters. All parameters are omitable.

message

If the target element contains the element which has 'message' class, you can replace its text with this parameter.

options

Override animation related css. Allowed keys are follows.

• name
• iteration-count
• duration
• timing-function
• delay
• direction

All keys are corresponding to animation-xxxx in css3.

Predefined animation

In jquery.animateDialog.css, 3 animations are defined.

• fade - Fade in, then fade out.
• inout - Zoom in, then zoom out.
• rotateZoom - Rotate and zoom.

If options parameter is omitted, fade animation is applied.

Sample

[HTML]
<div id="dialog" class="animateDialog-default" style="display:none;"><span class="message">Hello world!</span></div>

[SCRIPT]
//Default fade animation.(3 seconds.)
$("#dialog").animateDialg();

//Replace message
$("#dialog").animateDialg("Fade in!");

//Fade with 5 seconds.
$("#dialog").animateDialg({
    "duration" : "5s"
});

//Change animation to inout
$("#dialog").animateDialg("Zoom in!", {
    "name" : "inout"
});

//Junk samples.(Defined in jquery.animateDialog.junk.css)
$("#dialog").animateDialg({
    "name" : "translate"
});
$("#dialog").animateDialg({
    "name" : "rotate"
});
$("#dialog").animateDialg({
    "name" : "skew"
});
$("#dialog").animateDialg({
    "name" : "fullfull"
});

'animateDialog-default' is simple fixed dialog definition.

Of course you can use more complex element.

Default

Junk