Animation Direction

[jon.whitcraft]

I am using this function

cBox.setSize(imgSize.width,imgSize.height,true);

is there a way to tell the animation which direction to do.

What my problem is is that the box that expands that sits on the right side of the page will expand the window and cause to you have to scroll right to see it.

i basicly want to anchor it to the top right and have it expand out to the top left.


just select an item from the gird and add it to box 2 or 4 and then click on the box and you will see what i mean.

Thanks.

**edit** removed link.

[Animal]

Width has no "direction".

Really what you want is two concurrent animations.

Animate the left style attribute downwards, and the width upwards.

[jon.whitcraft]

Width has no "direction".

Really what you want is two concurrent animations.

Animate the left style attribute downwards, and the width upwards.

Ok that make some sense to me. can you give me an example?

Thank Animal!

**Edit**

I got it working now animal. Thanks again!!!

[brian.moeskau]

Hey Jon,

Just wanted to point out that using Element.slideOut/In, you can pass an anchor as a parameter to control exactly what you're trying to do. Check out the Fx class for details.

Brian

[jon.whitcraft]

Thanks guys.

With some help from Jack I got this figured out.

Here is what i came up with when the box is clicked.

var imgSize = Ext.fly(img[0]).getSize();
var xy = cBox.getXY();
if(cBox.hasClass('expanded')) {
	// we are expaned, do collapse
	if(cBox.hasClass('rightBox')) {
	    cBox.setBounds(xy[0]+(imgSize.width-340),xy[1],342,152,{callback: function() {
		    this.setStyle('position','');
		    this.removeClass('expanded');
		}}
	    );
	} else {
	    cBox.setBounds(xy[0],xy[1],342,152,{callback: function() {
		    this.setStyle('position','');
		    this.removeClass('expanded');
		}});
	}
} else {
	cBox.setStyle('position','absolute');
	if(cBox.hasClass('rightBox')) {
	    cBox.setBounds(xy[0]-(imgSize.width-340),xy[1],imgSize.width,imgSize.height,true);
	} else {
	    cBox.setBounds(xy[0],xy[1],imgSize.width,imgSize.height,true);
	}
	cBox.addClass('expanded');
}