Question posted in 
I would like when scrolling container, my menu change her heigth, width and hide her title, I have got it but don’t work the transition that I added.
html:
$(window).on('load', function() {
$("#container-wrapper").scroll(function() {
if ($('#container-wrapper').scrollTop() > 25) {
$('#list-menu').addClass('down');
} else {
$('#list-menu').removeClass('down');
}
});
});#list-menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
-ms-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#list-menu.down li {
width: 90px;
height: 38px;
}
#list-menu.down li a span {
display: none;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id=list-menu>
<div class="container">
<div class="col-md-10 col-md-offset-2">
<li><a href="default.asp"><i class="fa fa-home fa-lg" aria-hidden="true"></i><span class="title-menu">Inicio</span></a></li>
<li><a href="news.asp"><i class="fa fa-users fa-lg" aria-hidden="true"></i><span class="title-menu">Empleado</span></a></li>
<li><a href="contact.asp"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Citas</span></a></li>
<li><a href="about.asp"><i class="fa fa-male fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Pacientes</span></a></li>
<li><a href="about.asp"><i class="fa fa-eur fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Facturación</span></a></li>
<li><a href="about.asp"><i class="fa fa-bar-chart fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Estadísticas</span></a></li>
<li><a href="about.asp"><i class="fa fa-comments-o fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Campañas</span></a></li>
</div>
</div>Repeat, the script works, but don’t do the transition! Thanks for the help!
2
Answers
Please refer to the updated code and updated codepen
The code is running as per your requirement now
You need to set the transition on the li’s, not the ‘#list-menu’.
Also for width and height to animate, you need initial values for it