<p> tag in <li> animation
HTML
<div id="about_nav">
<p>
hello
</p>
</div>
CSS
#about_nav{
float:left;
display:block;
margin-left:0px;
overflow:hidden;
padding-right:10px;
}
div {
background-color: black;
color: yellow;
}
#about_nav ul{
list-style:none;
padding:0;
}
#about_nav li{
height:48px;
width:130px;
background: #613675; /* old browsers */
background: -moz-linear-gradient(top, #613675 0%, #9145B5 50%, #613675 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#613675), color-stop(50%,#9145B5), color-stop(100%,#613675)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#613675', endColorstr='#613675',GradientType=0 ); /* ie */
background: -o-linear-gradient(top, #613675 0%,#9145B5 50%,#613675 100%); /* opera */
text-align:middle;
margin-bottom:15px;
-moz-border-radius-bottomright: 6px 4px;
bottom-right-border-radius: 6px 4px;
-webkit-border-bottom-right-radius: 6px 4px;
-moz-border-radius-topright: 6px 4px;
top-right-border-radius: 6px 4px;
-webkit-border-top-right-radius: 6px 4px;
-moz-box-shadow: 0px 3px 8px 3px #444;
-webkit-box-shadow: 0px 3px 8px 3px #444;
box-shadow: 0px 3px 8px 3px #444;
}
#about_nav li p{
overflow: visible;
padding-top:19px;
padding-bottom:19px;
text-align:right;
margin-right:10px;
vertical-align:middle;
display: block;
}
JavaScript
var previous;
$('#anim li').click(function(){
console.log(previous);
if($(this)!=previous) { //checks if it was clicked last
if(previous!=null) { //checks if the previous element exists
previous.animate({
overflow: 'visible',
width: 130
}, 150);
}
$(this).animate({
overflow: 'visible',
width: 163
}, 150); //animates current
previous = $(this); //assigns current to previous
$('#about_content').children().hide(); //resets tabs window
$('#tab_welcome').show(); //displays correct tab
}
});