Reputation: 603
I am using .addClass
and .removeClass
on some divs which add or remove the bottom border. Is animating this possible? Something like this:
$("#left-title").addClass('active').show("slide", { direction: 'left', easing: 'easeInCirc' }, 1000);
Thanks
Upvotes: 0
Views: 1055
Reputation: 25659
Sure, use the transition
css3 property:
div{
float: left;
position: relative;
padding: .2em .5em .5em .5em;
background: #eceded;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-weight: bold;
box-shadow: inset 0 -5px 0 0 #bbb;
border-radius: 5px;
border: 1px solid #999;
overflow:hidden;
cursor: pointer;
}
div:after{
content: '';
display: block;
width: 0;
height: 5px;
position: absolute;
top: 100%;
left: 0;
margin-top: -5px;
background-color: red;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
div:hover:after{
width: 100%;
background-color: #0c0;
}
<div>Hover me</div>
Upvotes: 4