Testing if ready after class change

[j]

I have a CSS3 slideshow. I'm setting a class (element.className)
which is the starting point of the transition, and then setting a class
which is the end point.

For example to zoom in center:
/* starting point */
.enlarged img{
width: 150%;
height: 150%;
opacity: 0;
margin-left: -25%;
margin-top: -25%;
}

.shrink_center_center img{
width: 100%;
height: 100%;
...
transition-property:margin,opacity,width,height;
...
}


There needs to be sufficient time between setting the starting class and
setting the transition, if not, the transition gets garbled. (slower in
my Chrome,~100 mS)

How can you tell when the class for the image is ready? I see that
readystate does not work on individual elements (at least in FF).

Jeff

[Gus Richter]

I gave you a link which would have lead you to:
<https://developer.mozilla.org/en/CSS/CSS_transitions>
There are detailed descriptions and examples. There is one demo
including -moz-, -webkit- and -ms- proprietory prefixes:
<http://jsfiddle.net/RwtHn/5/>

--
Gus

[j]

On 5/21/2012 9:49 PM, Gus Richter wrote:
> On 5/21/2012 1:40 PM, j wrote:

<snip>

>> How can you tell when the class for the image is ready? I see that
>> readystate does not work on individual elements (at least in FF).
>
> I gave you a link which would have lead you to:
> <https://developer.mozilla.org/en/CSS/CSS_transitions>
> There are detailed descriptions and examples. There is one demo
> including -moz-, -webkit- and -ms- proprietory prefixes:
> <http://jsfiddle.net/RwtHn/5/>

My fault. I looked through that before but I didn't really read it. It
has everything I need. Been rushed...

Thanks,
Jeff



>