I am experiencing an issue with my sidebar numbers that expand on hover to reveal text beside them. Upon refreshing the page, the 'hidden' content briefly displays before collapsing again. How can I prevent this unwanted behavior?
Below is the code in question:
<div class="sidebar">
<ul>
<li><a href=""><span>01</span> HomePage</a></li>
<li><a href=""><span>02</span> SubPage 1</a></li>
<li><a href=""><span>03</span> SubPage 2</a></li>
<li><a href=""><span>04</span> SubPage 3</a></li>
<li><a href=""><span>05</span> SubPage 4</a></li>
</ul>
</div>
.sidebar {
position: fixed;
width:80px;
height:100vw;
top:0;
left:0;
z-index:100;
background:#111;
color:#fff;
overflow:hidden;
}
.sidebar ul {
margin:0;
padding:0;
width:200px;
margin:10px;
list-style:none;
}
.sidebar a span {
margin:0 10px 0 0;
}
.sidebar a {
color:#fff;
font-size:14px;
text-decoration:none;
}
And here is the jQuery code:
$(document).ready(function () {
$('.sidebar').hover(function(){
$(this).animate({width:'110px'},500);
},function(){
$(this).animate({width:'35px'},500);
}).trigger('mouseleave');
});
I would appreciate any guidance on what may have gone wrong and how I can rectify it. Thank you!