views:

1137

answers:

2

I'm not even sure if this is possible, but I want to combine blind and fade.

Fade works by changing the opacity of an element, and blind I think, by changing the width/height.

My goal is to create an animation where the edge of the element would fade away across the screen, aka a combination of blind and fade. I don't know if there's a term for it.

But anyhow, is this possible to do and if so how?

A: 

Play around with the jQuery animate() function. This basically allows you to linearly interpolate between CSS values (From whatever the object starts with to values you define) over a set amount of time. So you could use this to alter opacity and width on your own to achieve the effect you want.

Be careful doing this though, as you'll need to account for all the variants of opacity, since IE doesn't yet support the standard "opacity: value;" one.

Nicholas Flynt
Thanks, I understand the usefulness of the animate method. However I'm not seeing a way of syncing the opacity and width change so that the opacity only changes where the width is changing.
Jourkey
+1  A: 

The solution I'm thinking of right now is to break the fading element into 1px pieces and then fade each pixel individually at the same time as the blinding is occurring. I cannot imagine this being smooth with current browsers.

I'm just going to tentatively call this 'not possible'.

Jourkey