Download qooxdoo Documentation

qooxdoo Documentation, Release 1.3.1
var el = button1.getContainerElement().getDomElement();
var psEffect = new qx.fx.effect.combination.Pulsate(el);
// The pulsate effect will take two seconds to execute
psEffect.seDuration(2);
var mvEffect = new qx.fx.effect.core.Move(el);
mvEffect.set({
x : 100,
y : 200,
delay : 2 // Wait two seconds to execute
});
// Start both effects at the same time
psEffect.start();
mvEffect.start();
Writing own effects
To create own effects, create a new class and extend from qx.fx.Base and overwrite the update() methode. You
can access the DOM element of the effect by calling this._getElement().
qx.Class.define("fxdemo.flickerBackground",
{
extend : qx.fx.Base,
members :
{
update : function(value)
{
var element = this._getElement();
// Value is a floating-point number between the start and end property.
value +=""; // Convert it to a string.
value = parseInt(value[value.length-1], 10); // Read the last digit and parse it to integer
element.style.backgroundColor = "’" + (value % 2 == 0) ? "red" : "blue" + "’";
}
}
});
List of effects
The qx.fx.effect package contains 14 effects:
• ColorFlow Changes the background color of an element to a given initial. After that the effects waits a given
amount of time before it modifies to background color back to the initial value.
• Drop Moves the element to the given direction while fading it out.
• Fade Fades in the specified element: it changes to opacity from a given value to another. If target value is 0, it
will hide the element, if value is 1, it will show it using the “display” property.
• Fold Shrinks the element in width and height until it gets invisible.
• Grow Resizes the element from initial dimensions to final dimensions.
• Highlight Cycles the background color of the element from initial to final color.
194
Chapter 5. Low Level Framework