JQuery toggle class transition failing to function

I have attempted to incorporate CSS transitions to toggle classes, but unfortunately, they are not functioning as expected. No change occurs.

Here is a reference to the code in question:
https://jsfiddle.net/n1rz7jqp/

JQUERY: 

$('.right-side-menu').on('click', function() {
  $('.right-side-menu-collapsed').slideToggle();
});

$('.hamburger-icon').on('click', function() {
  $('.my-container').toggleClass("my-container-toggle", 1000, "easeOutSine");
  $('.left-navigation-collapsed').toggleClass("left-navigation-toggle", 1000, "easeOutSine");
});

// Additional list toggler functions

The main objective is to achieve a smooth transition effect when clicking the hamburger icon for navigation to open. Please view the following demonstration: https://jsfiddle.net/knkf4ocu/1/

javascriptjqueryhtmlcsstransition

Answer №1

Transition effect does not function with display:none and display:block. To achieve the desired effect, adjust the left position as demonstrated below:

$('.right-side-menu').on('click', function() {
  $('.right-side-menu-collapsed').slideToggle();
});

$('.hamburger-icon').on('click', function() {
  $('.my-container').toggleClass("my-container-toggle", 1000, "easeOutSine");
  $('.left-navigation-collapsed').toggleClass("left-navigation-toggle", 1000, "easeOutSine");
});

// Additional functions for toggling lists...


.homeTopLink .sf-menu {
  font-size: 11px;
  font-weight: bold;
}

// Additional CSS styles...
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="left-navigation-collapsed">
  // Navigation elements...
</nav>

<div class="my-container">
  <header class="site-header-992px">
    // Header content...
  </header>
  <!-- Start Site Header max width-->

View Working Fiddle

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

What is the best way to structure my protractor scenarios for effectively validating HTTP response errors?

My current setup involves using protractor to test the functionality of my Angular client, while the server is implemented using Python Google App Engine. In order to enhance my protractor test, I am looking to include an assertion on the http response ge ...

javascriptangularjsselenium-webdriverprotractor

Introduce a pause using the raycaster function

When my raycaster intersects an object for 2 seconds, I want to update the object's texture. I attempted to use the clock function, but I am unsure of how to properly implement it. var clock = new THREE.Clock(); clock.autoStart = true; var inters ...

javascriptthree.js

Utilizing various filters and sorting options on API response within Angular 8

Upon receiving the following API response: [ { "imgPaths":[ "gallery/products/55ccb60cddb4d9bded02accb26827ce4" ], "_id":"5f3e961d65c6d591ba04f3d3", "productName":" ...

javascriptangulartypescript

axios encountered a JSON parsing issue due to an unexpected character in the server's response

I'm encountering an issue with JSON parsing as I attempt to retrieve data from a server endpoint. This is the first instance where Axios is unable to automatically decode the JSON response. Upon inspecting my code, I noticed that Axios is detecting ...

javascriptnode.jsjsonaxios

The issue in AngularJS 1.4 where the select element value is not binding due to a type mismatch

My ng-model has a value assigned to it, but it is not binding with the selected element. <select data-ng-model="myval"> <option value="? number:2 ?"></option> <option value="2" class="ng-binding">Value 1</option> <op ...

javascripthtmlangularjs

Tips for injecting a dynamic JavaScript file into PhantomJS

I'm attempting to extract the value of an input, utilize AJAX to transmit these variables to a PHP function, invoke PhantomJS from that PHP function along with the passed arguments from AJAX, and then send back the outcome to the HTML page. The variab ...

javascriptphpjqueryajax

Exploring Methods for Retrieving offsetHeight and scrollHeight in AngularJS

I am currently developing a directive that requires three specific values: scrollTop offsetHeight scrollHeight projectModule.directive('scroller', function ($window) { return { restrict: 'A', link: function (scope, elem, attrs) { ...

javascriptangularjs

Tips for delaying my response in nodejs until the loop is complete

This is the code I'm currently working with: myinsts.forEach(function (myinstId) { Organization.getOrgById(myinstId,function (err, insts) { res.json(insts); }) }); I am using Node.js and encountering an error message that says "Can't set hea ...

javascriptnode.jsasynchronouscallback

Menu selection without javascript

Recently, I encountered an issue with a menu containing tabs. When hovering over a tab, a list of items appears at the bottom of the tab. However, I decided that I wanted this list to transition downwards instead of simply appearing (previously set as disp ...

htmlcssmenu

Ensure that the JavaScript is loaded prior to refreshing the webpage

Below is the HTML code snippet: <script src="https://maps.googleapis.com/maps/api/js?key=mykey&callback=initMap&v=quarterly" defer></script> <script src="{% static '/javascript/maplanguage.js' %}">< ...

javascripthtmljquerydjangogoogle-maps

Issues with the functionality of a straightforward Angular 5 form that includes an Action

I'm facing an issue with the code provided below in my Angular HTML file. Surprisingly, it works perfectly fine when used individually in an HTML file. I can't seem to figure out what I'm doing wrong as this is just a simple form. <form ...

htmlangularforms

What could be the reason for the failure to inject Angular Bootstrap?

How can I incorporate Angular Bootstrap into my AngularJS application correctly? By manually including external versions of the libraries in the index.html file, everything works perfectly with Angular Bootstrap: <!-- start manual dependencies for t ...

javascriptangularjstwitter-bootstrapbower

Refresh the HTML content as soon as a modification is detected in the MySQL Database

Apologies if this sounds like a basic question, but I've hit a roadblock in my search for answers on the vast expanse of the internet... I am in the process of constructing a website that requires certain data on the page to be updated automatically. ...

phpmysqlajaxhtml

Bring in a collection of classes of various types from one TypeScript file to another

In my code file exampleA.ts, I define an object as follows: import { ExampleClass } from 'example.ts'; export const dynamicImportations = { ExampleClass }; Later, in another file named exampleB.ts, I import an array that includes class types and ...

javascripttypescript

Creating a replica of Airbnb using Bootstrap 5: Transforming the search bar into a button

I am looking to implement a search bar button similar to the one on airbnb using bootstrap 5, like this example: https://i.sstatic.net/oIIzv.png Here is an example of HTML code that you can use: <button type="button" class="btn btn-ligh ...

htmlcsstwitter-bootstrapbootstrap-5

"Blank Canvas: Exploring the Void in Laravel Blade Templates

This is the route that I am using Route::get('login', function(){ return View::make('admins.login'); }); In this code, I have created a admins/login.blade.php file to handle the login view. <!doctype html> <html> < ...

phphtmllaravellaravel-4laravel-blade

Searching in Vue based on the selected option is only possible by the selected criteria and not by id, regardless of the

#1 Even if chosen, cannot search by id. The 'name' condition in the loop works well but I am unable to correctly search by id (returns nothing). #2 When selecting an option from the dropdown menu, it only displays until I start typing. I would l ...

javascripttypescriptvue.js

The navigation bar components created with Bootstrap are experiencing issues with their active state functionality

I created a Navbar using Bootstrap code but I am facing an issue where the 'active' state is not being applied to the Navbar elements on my webpage. I have been attempting to add and remove the active class on the Navbar elements, but I have bee ...

htmlcssbootstrap-4navbar

Adjust the width to ensure the height is within the bounds of the window screen?

I am currently in the process of developing a responsive website, and my goal is to have the homepage display without any need for scrolling. The layout consists of a 239px tall header, a footer that is 94px tall, and an Owl Carousel that slides through im ...

javascriptjqueryhtmlcss

Notify user before exiting the page if there is an unsaved form using TypeScript

I am working on a script that handles unsaved text inputs. Here is the code for the script: export class Unsave { public static unsave_check(): void { let unsaved = false; $(":input").change(function(){ unsaved = true; ...

javascriptjquerytypescript