Question

I am using a responsive css framework(Twitter Bootstrap) for my site and have labels that have a width specified via css. So they have a class of “span3”. When the page open, I collapse them to a width of 25, but on rollover want to get them back to span3. Issue is that span3 is different width depending on the current media query.

Can I animate the width to the current value of span3? Right now, I just have hard coded numbers in rollover and rollout.

Answer 1

You can use CSS transitions to do that.

If you want to use JS to trigger the animation you can add/remove class instead of :hover in my example.

JSFiddle: http://jsfiddle.net/Ls8e4/

<div class="col3">
<div class="button">Label</div>
</div>​

CSS:

.col3 {width: 200px;}
.button {
    width: 25px;
    background-color: red;
    overflow: hidden;
    transition: width 0.5s;
    -webkit-transition: width 0.5s;
    /*add more prefixes*/
}

.button:hover
{
    width: 100%;
}