pulp.morph - Simple Morph Effects API and Demos

API

pulp.morph adds fade and morph effects by extending pulp.node with the following methods. (Assume that the shortcut for pulp.node instances is already set using pulp.ImportShortcuts() or var $ = pulp.node.getInstance;). Demos are below the API information.

fadeIn()

fadeIn() fades an element from transparent to opaque. It can receive 0, one or two arguments. duration is the number of milliseconds over which to perform the animation. When duration is less than 34 (one frame), the number is interpretted as seconds—it is multiplied by 1000. When unspecified, duration defaults to 1000 which is 1000ms. onComplete is the callback to fire when the animation is complete.

$('id').fadeIn();                     // duration = 1000ms
$('id').fadeIn(onComplete);           // duration = 1000ms
$('id').fadeIn(duration);
$('id').fadeIn(duration, onComplete);

fadeOut()

fadeOut() is the opposite of fadeIn(); it fades an element from opaque to transparent. It can receive 0, one or two arguments just like fadeIn().

$('id').fadeOut();                     // duration = 1000ms
$('id').fadeOut(onComplete);           // duration = 1000ms
$('id').fadeOut(duration);
$('id').fadeOut(duration, onComplete);

fadeInOut()

fadeInOut() is a concise way to display a user message for a brief period. It fades in an element, pauses then fades out the element. It can receive 0, one or two arguments. delay is the number of milliseconds to pause before fading out the element. delay defaults to 5000ms. onComplete is the callback to fire when the animation is complete. The fade in duration is set to 400ms and the fadeout duration is set to 2500ms—you cannot specify those values.

$('id').fadeInOut();                     // delay = 5000ms
$('id').fadeInOut(onComplete);           // delay = 5000ms
$('id').fadeInOut(delay);
$('id').fadeInOut(delay, onComplete);

morph()

morph() transforms an element from one style to another. The begin and end style may be an object with style properties (e.g. {width: "400px", color: "#FFBB2E"}), a style string (e.g. "width: 400px; color: #FFBB2E") or a CSS class name. Shorthand styles for border, padding and margin are supported. Color names for common colors are transformed into hex notation. duration and onComplete are optional and work the same way as the fade methods.

$('id').morph(endStyleOrCssClass[,duration[,onComplete]]);
$('id').morph(beginStyleOrCssClass, endStyleOrCssClass[,duration[,onComplete]]);

Demo: Fade In Using fadeIn()

$('fadeIn').fadeIn();

Demo: Fade Out Using fadeOut()

$('fadeOut').fadeOut();

Demo: Notification Popup Using fadeInOut()

$('fadeInOut').fadeInOut(2000);

Demo: morph() with Style String

var start = 'border:1px solid #aaa;   height: 50px;  width: 200px; color: #00f;';
var end   = 'border:6px solid orange; height: 100px; width: 700px; color: #f00;';
$('morph1').morph(start, end, 1000);

Demo: morph() with Style Object

var start = {backgroundColor: '#fff', color: '#000', fontSize: '12px'};
var end   = {backgroundColor: '#000', color: '#fff', fontSize: '18px'};
$('morph2').morph(start, end, 500);

Demo: morph() without start Specified

var end = 'border:2px solid gray; height: 200px; width: 200px; font-size: 20px;';
$('morph3').morph(end, 1000);

Demo: morph() with CSS Classes

<style type="text/css">
  .standard {
    font-weight: normal;
    font-size: 12px;
    line-height: 15px;
    color: black;
    background-color: #ddd;
  }
  .featured {
    font-weight: normal;
    font-size: 19px;
    line-height: 24px;
    color: red;		
    background-color: #fff;
  }
</style>
<script type="text/javascript">
  $('morph4').morph('standard', 'featured', 300);
</script>