Motion Effects / Alerts

 
 
Please check the visual Effects section before proceeding further. That is the foundation upon which this article is built upon
 
Within the javascript section you can access the object properties using the "this" operator
 
The html div is also accessible using this mechanism.
 
so "this.div" refers to the jquery div object.
 
To this you can use the following jquery effects.
 
Example
 
if (glb["_new"]<20)
{
this.textColor='red';
       
this.div.effect("bounce", { direction:'left', times:5 }, 300);
}
else if (glb["_new"]<40)
{
this.textColor='green';
}
else if (glb["_new"]<80)
this.textColor='blue';
else if (glb["_new"]<110)
this.textColor='yellow';
else
this.fillColor='red';
 
 
If you notice, the first if condition is "if less than 20 then change color to red and also shake the widget with a bounce effect."
 
The effects can be applied only to the this.div
 
More more effects
 
Effects that can be used with Show/Hide/Toggle:
 
  • Blind - Blinds the element away or shows it by blinding it in.
  • Clip - Clips the element on or off, vertically or horizontally.
  • Drop - Drops the element away or shows it by dropping it in.
  • Explode - Explodes the element into multiple pieces.
  • Fade - Fades the element, by gradually changing its opacity.
  • Fold - Folds the element like a piece of paper.
  • Puff - Scale and fade out animations create the puff effect.
  • Slide - Slides the element out of the viewport.
  • Scale - Shrink or grow an element by a percentage factor.
 
 
Effects that can be only used stand-alone
 
Bounce - Bounces the element vertically or horizontally n-times.
Highlight - Highlights the background with a defined color.
Pulsate - Pulsates the opacity of the element multiple times.
Shake - Shakes the element vertically or horizontally n-times.
Size - Resize an element to a specified width and height.
Transfer - Transfers the outline of an element to another.
Use online Web Dashboards in the cloud or download and host your own Dashboards