Animate Text

by ATechieDiary

HTML

<link rel="stylesheet" href="http://extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all.css">
<p id="aid">I am getting animated </p>

JavaScript

var p1 = Ext.get('aid');

	// p1.syncFx();
	
	p1.animate({
	    to: {
	        x: 500
	    }
	}).animate({
	    to: {
	        y: 150
	    }
	});

	//var p1 = Ext.get('aid');

	p1.animate({
		duration:2000,
	    from: {
	        backgroundColor: '#0f0'  //white
	    },
	    to: {
	        backgroundColor: '#f00'  //red
	    }
	})
	
	p1.animate({
		duration: 2000,
        to: {
	        opacity: 0
	    },
	    listeners: {
            beforeanimate:  function() {
                //alert("Execute my custom method before the animation");
                alert(arguments.length);
            },
            afteranimate: function() {
                alert("Execute my custom method after the animation");
            }//,
            //scope: this
	    }
	});