Can we use ToggleClass to animate elements using jQuery?

I have a section on my website where I want to implement an expand feature. I am currently using jQuery's toggleClass function to achieve this effect.

   jQuery('.menux').click(function() {
        jQuery(this).toggleClass('is-active');
        jQuery('.a').toggleClass('a1');
        jQuery('.b').toggleClass('b1');
        jQuery('.c').toggleClass('c1');
    });

The initial click triggers the animation perfectly. However, upon clicking for the second time, the animation fails to appear. Unlike the smooth downward movement during the first click. I tried adding a duration using 

jQuery('.c').toggleClass('c1', 2000);
, but it didn't work as expected. How can I modify the animation so that it ascends slowly when clicked for the second time?

You can view my test here: https://jsfiddle.net/u6aztsgt/1/

javascriptjquerycss

Answer №1

Consider experimenting with a fresh animation effect and activating it on the second click, or alternatively toggling it on the first click. Here is an example of CSS code for an animation triggered by the second click:

@-webkit-keyframes dropUp{from{margin-top: 0px;opacity: 1}to{margin-top: -20px;opacity: 0}}
@-moz-keyframes dropUp{from{margin-top: 0px;opacity: 1}to{margin-top: -20px;opacity: 0}}
@keyframes dropUp{from{margin-top: 0px;opacity: 1}to{margin-top: -20px;opacity: 0}}
.a2, .b2, .c2 {
  -webkit-animation: dropUp 1s;
  -moz-animation: dropUp 1s;
  animation: dropUp 1s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
  opacity: 0;
  display: block;
}

.a2 {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  animation-delay: 0s;
}

.b2 {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.c2 {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

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

Facing an issue where the CSS class name is not displaying correctly when utilizing CSS Modules with my React

This webpack.config.js file is dedicated to the module section, where loaders are defined for JSX files and CSS. module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'bab ...

javascriptcssreactjswebpack-dev-serverwebpack-style-loader

Identifying a shift in data model within a component

It seems like there's a piece I might be overlooking, but here's my current situation - I have data that is being linked to the ngModel input of a component, like so: Typescript: SomeData = { SomeValue: 'bar' } Snippet from the vie ...

javascriptangulartypescript

Leveraging jquery's setInterval for automating tasks like a cronjob

I've been experimenting with Cronjobs and I've run into a roadblock. My goal is to have the cronjob execute every X minutes, containing a script with JavaScript that calls an ajax request every second for the next 60 seconds. The ajax call trigge ...

javascriptphpjqueryajax

Trouble with formatting in React

I am presented with the following code snippet that I did not author: render: function () { if(this.state.loading){ return <div><span><i className="fa fa-spinner fa-spin"></i> Loading...</span></div& ...

javascripthtmlreactjsrender

Error Encountered: RSA Key Pairs Invalid Signature for JSON Web Token (JWT)

I am facing an issue with my Node.js application (version 20.5.1) regarding the verification of JSON Web Tokens (JWT) using RSA key pairs. The specific error message I am encountering is: [16:39:56.959] FATAL (26460): invalid signature err: { "type& ...

javascriptnode.jstypescriptjwt

Tips for saving an image that has been dragged onto the browser locally

I recently started working with Angular and decided to use the angular-file-upload project from GitHub here. I'm currently in the process of setting up the backend for my application, but I'd like to be able to display dropped files locally in th ...

javascriptangularjsupload

Strategies for making a child div fade out when the parent div is hovered over

I have a div with the class name ordershape and inside it, there is another div called fad-res. My goal is to display the corresponding fad-res when I hover over a specific ordershape, while hiding the other divs. <div class="ordershape"> & ...

javascripthtmlcss

issues related to implementing search functionality with react-redux

Just starting out with my first react-redux project which is a list of courses, but I have hit a roadblock with redux. I am trying to implement a search functionality based on this answer, and while I can see the action in redux-devtools, it's not ref ...

javascriptreactjsreact-redux

Even after assigning the class "img-fluid" to my image, it still fails to properly adjust to the screen size

I added the class "img-fluid" to my image in Bootstrap, but it's not fitting on my webpage. What should I do? <img src="images\406201.jpg" class="img-fluid" alt="..."> <div style="margin-top: 0p ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Searching for the index of an item in a PHP array using the inArray jQuery method

I came across this code snippet online that seems to achieve what I'm looking for: $(document).ready(function(){ var arrData = [ "j", "Q", "u", "e","r","y" ]; alert(jQuery.inArray("Q", arrData)); }); Now, I have an array generated from a ...

phpjqueryarrays

Is there a way to invoke a JavaScript function specifically for a given link?

I am trying to make the JavaScript only apply to a specific A LINK (#tornado,_bar -> ul -> li -> a links) when clicked, but it is applying to all A links. How can I specify the particular link in the JS? The JavaScript code is not functioning cor ...

javascriptjquery

What are the steps to create a DOM element with an elevated hierarchy level?

I have a DOM structure with the following hierarchy: <div id='outter'><div id='middle'><div id='inner'></div></div></div> Is there a way to make the inner div the direct child of the outte ...

jquery

Attempting to showcase a pair of unordered lists side by side using the power of flexbox

I am having trouble getting this to display on a single line, no matter what I try. While there may be simpler ways to achieve this without using flexbox, I am eager to learn how to do it using flexbox properties. My desired outcome is to have the first u ...

htmlcssflexbox

"Can anyone provide guidance on how to initiate a css 3d animation by clicking a button

Currently, I am developing a folding hide/show animation that can be triggered using Javascript. If you would like to take a look at the code and see a working example, please visit this link: You can also view just the gist here: https://gist.github.com ...

javascriptjquerycssanimationwebkit

Align the position of two divs with matching IDs (#thumb-1 equals #project-1) using JavaScript or jQuery, but without the use of jQuery UI

I am currently working on creating a portfolio gallery and have put together the following HTML structure: <article class="work-gallery"> <ul> <li id="project-1"><img src="http://placehold.it/50x00"></li> ...

javascriptjqueryhtmlcssmatch

Remove the "x" character from the phone field if an extension is not provided in the Jquery masked input plugin

Currently utilizing the jquery Masked input plugin. The mask I have applied to a field is as follows: "?999-999-9999 x9999" Why is there a ? at the beginning? This was implemented to prevent the field from clearing out when an incomplete number is ente ...

javascriptjquerymaskedinputjquery-mask

Eliminate the preset padding on the left and right sides of the container-fluid in Bootstrap 5

How can I remove the default padding-left and padding-right in a container-fluid using Bootstrap 5? I don't want to use "!important" in my CSS file. I have already tried disabling the default padding with Chrome dev tools but it didn't work. Any ...

htmlcsstwitter-bootstrapbootstrap-5

UI-Router is malfunctioning, causing ui-sref to fail in generating the URL

I'm currently working on a project that involves Angular, Express, and UI-router for managing routes. While I've properly configured my $states and included the necessary Angular and UI-router libraries in my HTML file, I am facing an issue wher ...

javascriptangularjsnode.jsexpressangular-ui-router

Detecting the clicked link within a React component

My NavBar features a Logo that includes a Link to the Home page "/". The application kicks off from the main page and as per user selections, the UI will adapt accordingly. To offer users a chance to reset everything if they are currently on the Home compo ...

javascriptreactjshyperlinkreact-router

How can I create a pop-out message box in HTML similar to the style used in Gmail or OkC

As someone who isn't very experienced in client development, I hope you'll forgive me for asking what might be a simple question that can easily be solved with Firebug. I'm interested in learning how to create a feature like the OKCupid or G ...

javascripthtmlasp.net