Using addClass and removeClass with transition does not yield the desired result

As I scroll through the container, I want my menu to change its height, width, and hide its title. I have implemented this functionality, but the transition I added is not working.

HTML code:

$(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>
javascriptjqueryhtmlcss

Answer №1

To achieve smooth transitions, it is important to apply transition effects on the list items instead of targeting the '#list-menu' element specifically. In addition, do remember to specify initial values for width and height in order to enable animation.

Answer №2

Check out the updated code and visit the updated codepen link

$(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;

}
.down li{
    width: 90px;
    height: 38px;
}
.down li a span{
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id=list-menu>
    <div class="container" id="container-wrapper" style="height:400px; overflow:auto;">
        <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>
            // Rest of the menu items to be included here
        </div>
    </div>
    </ul>

The code has been updated and is now functioning as requested

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying the HTML code for a dynamically generated table

Can the generated HTML code be retrieved when dynamically creating a table using v-for loops in Vue? <table> <tr> <th colspan="99">row 1</th> </tr> <tr> <th rowspan="2">row 2< ...

javascripthtmlvue.js

Managing Pop-Ups when browsing on Internet Explorer

I've been working on an Excel VBA macro that automates several tasks on the Medicare website. The macro opens IE, logs in, compares claims, and alerts me to any differences found. However, I've encountered a problem during the log-in step, specif ...

javascriptexcelautomationalertvba

How about this: "Express different times of the day using AngularJS -

In attempting to develop a directive that can determine whether it is morning, afternoon, or evening using JavaScript logic, the following code would need to be implemented: var time = 00; /* Check if the hour is before noon */ if (time < 12) { do ...

javascriptangularjs

I am curious about when the CSS of my website will start impacting its search engine ranking

Initially, my perception of CSS was that it was only used for styling the appearance of a document when viewed in a browser. However, I soon came to realize that search engines also utilize CSS for indexing web pages. It is said that search engines do not ...

cssseosearch-enginegoogle-search

Using inline style instead of relying on the quill editor's built-in classes, as classes may not be accessible in order to render HTML effectively

I have integrated the ngx-quill editor into my Angular project as the rich text editor. I plan to save the generated HTML in a database and display it on various browsers using innerHTML. Since the styling is done through a class attribute that references ...

cssangularwysiwygquillngx-quill

Focusing in on the mouse location to magnify a THREE.js element

I am currently working on a project using THREE.js and I have encountered an issue with zooming the object. The zoom functionality is centered around the render position when using trackball controls, but I need it to be based on the cursor's position ...

javascriptjquerythree.js

The Typescript loop appears to be stuck and not moving through the

I have encountered a problem while trying to iterate through my array using foreach and forloop in an angular 8 application. Despite having 250 objects in the array, it is not iterating through any elements. I am unable to figure out what the issue could b ...

javascriptangulartypescript

When loading HTML using JavaScript, the CSS within the HTML is not properly processing. Leveraging Bootstrap 5 might help resolve

Currently utilizing bootstrap 5 for my project. I have a setup in index.html where I am loading the contents of nav.html using JavaScript. However, I am facing an issue wherein the CSS styling for the navbar is not being applied when loaded via JS. Strange ...

javascripthtmljquerycssbootstrap-5

Sending Ajax data with an extra parameter

I've encountered an issue with a jquery script that I'm using to send serialized form data along with a modified variable. Despite trying various methods, the additional variable isn't being posted. One approach that seemed promising was ut ...

jqueryajax

Post an image to Facebook without using a link

I have a website and I'm looking to share images on Facebook with the click of a button. I've managed to set up image sharing via URL by hosting them on my server. However, I'm curious about other sharing options available. Can images be ...

phphtmlfacebookfacebook-graph-apisocial-networking

Ensuring the authenticity of a Node.js model through the utilization of

Recently, I've been working on developing a NodeJS application using JavaScript and MySQL. As the object I'm handling started to grow in complexity making it difficult to read, I received a recommendation to implement the builder pattern. In resp ...

javascriptmysqlnode.js

Adding a Close Button to a MaterializeCSS Card or Card-Panel

Hey everyone! I'm looking for guidance on how to add a close button (x) to a card or card-panel in MaterializeCSS. While Bootstrap offers an Alert component, unfortunately MaterializeCSS does not have one readily available. Does anyone know of a wor ...

htmltwitter-bootstrap-3materialize

Keep an ongoing execution of a node.js file by sending an HTTP request repeatedly

I am working on a project using node.js and express where I have a file named TCPServer.js that is responsible for polling a TCP/IP server. The goal is to send a single HTTP request to a database, retrieve the IP Address and port number, and then utilize t ...

javascriptnode.jsexpresshttprequest

Obtaining a return value from a function that involves a series of chained Ajax requests in jQuery

I'm facing an issue with my function that involves chained Ajax requests. Function A and B are both Ajax requests, where A runs first and B runs after A returns its data. The problem arises when Function C executes Function B. Upon execution of Funct ...

javascriptjqueryajax

There is an issue with Node/Express not accurately updating the data model

I recently went through a tutorial on creating a RESTful API with Node.js and MongoDB. While it worked well overall, I encountered a few issues. My Player model is as follows: var player = new mongoose.Schema({ name: String, email: String, score: String } ...

javascriptajaxnode.jsmongodbexpress

What is the process for applying CSS styles to a particular component?

What is the recommended way to apply CSS styles to a specific component? For instance, in my App.js file, I have added Login and Register components for routing purposes. In Login.css, I have defined some CSS styles and then imported it into Login.js. T ...

cssreactjsreact-router

Issue with overriding font-family variable in Bootstrap 5 not resolving

I have configured Proxima+Nova font for my Angular application style.css @import url('https://fonts.googleapis.com/css?family=Proxima+Nova'); Attempting to change the root font using bootstrap variables as shown below $variable-prefix: ...

csstwitter-bootstrapbootstrap-4bootstrap-5

Retrieve the chosen option index using AngularJS

It is common knowledge that a select list can have multiple options, each starting from [0]. For example: [0]<option>E.U</option> [1]<option>India</option> [2]<option>Peru</option> In my Angular application, I am using ...

javascriptangularjs

Once the if condition is implemented, the functionality of the toggle button ceases to operate

Take a look at this demo link: http://jsbin.com/labuxuziraya/1/edit I encountered an issue where the button stops working after adding an if condition. I suspect there are some minor bugs in the code, but my level of experience is not enough to pinpoint t ...

javascriptjqueryhtmlcss

Click on a div in AngularJS to be directed to a specific URL

I'm currently working on developing an Angular mobile app and I want to be able to navigate to a specific URL, like www.google.com, when a particular div is clicked. Unfortunately, I'm still new to the world of Angular and struggling to achieve t ...

javascripthtmlangularjs