fightstarr20 fightstarr20 - 1 year ago 150
Javascript Question

Animate border left to right

I am trying to animate a bottom border on a div so that it looks like a line sliding in from the right.

I am using jQuery but can't seem to work out how to achieve it, can anyone point me in the direction of a tutorial or reading on it?

Answer Source

This is not possible using a border. You can only animate the width of the bottom border (which appears to be it's height), not it's left/right position or horizontal width.

Instead, look at creating an absolutely positioned element within the element, and animating the width of that instead.

<div id="foo">
    <div class="slider"></div>
#foo {
    font-size: 2em;
    position: relative;
    padding: 30px;
.slider {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: #C00;
    width: 0%;
    width: $('#foo').width()
}, 1000);

Example fiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download