fadeTo()

Fade the object to the specified opacity value.

Syntax fadeTo(opacity, [ duration [, easing [, callback ]]])
fadeTo(opacity, [duration | easing | callback [, callback ]])

Return Type displayObject

Description

Fade the object to the specified opacity value. This is a shorthand for the animate() method. It only passes an object with opacity: <value> to the animate() method. See the animate() method for more details about the arguments.

Arguments

opacity : Number
The opacity end value that the object will have when the animation is complete. A number between 0 an 1.

Return Value

displayObject. Returns the display object itself.

Examples

Example 1

We create a new core instance and a rectangle that we add to the canvas. Then we bind an event handler to the rectangle, which will clear the animation queue and start the fade animation, when it is clicked. With the callback we specify that the background should be red when the animation is complete.

View Example
Code
var canvas = oCanvas.create({
	canvas: "#canvas",
	background: "#ccc",
	fps: 60
});

var rectangle = canvas.display.rectangle({
	x: 77,
	y: 150,
	width: 200,
	height: 100,
	fill: "#000"
});

canvas.addChild(rectangle);

rectangle.bind("click tap", function () {

	this.stop();
	this.fadeTo(0.5, "long", "ease-in-out-cubic", function () {
		canvas.background.set("#f00");
	});
});
Output