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?
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">
Foo
<div class="slider"></div>
</div>
#foo {
font-size: 2em;
position: relative;
padding: 30px;
}
.slider {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background-color: #C00;
width: 0%;
}
$('.slider').animate({
width: $('#foo').width()
}, 1000);
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments