I am struggling to run the jQuery animation that adjusts the width more than once

Question

I am struggling to run the jQuery animation that adjusts the width more than once

My goal is to allow the user to expand and retract a <div> element upon clicking. The desired behavior is for the <div> to expand when clicked, and then retract back to its original width when clicked again.

However, when testing this functionality, I encountered an issue where the <div> would expand on the first click but fail to retract on the second click. Despite confirming that the click event is being triggered with console.log(), the animation does not run again. Even when adding a function at the end of the animation to log a message, the <div> remains unchanged. Various attempts have been made to solve this problem without success.

Shown below is one of the attempted solutions. Alternative methods such as using removeClass().addClass() or implementing two separate click events have also been tested, all resulting in the same issue.

$(document).ready(function() {
  var count = 1;
  var modulo = 1;

 $("#animateMe").click(function() {
   modulo = count % 2;
   count += 1;
   $("#animateMe").animate({
     width: (modulo = 0 ? 500 : 250)
   });
 });
});

HTML:

<div id="animateMe"></div>

CSS:

#animateMe  {
  background-color:blue;
  height: 100px;
}

Check out the codepen example for reference: https://codepen.io/ethan-vernon/pen/mLqBxR

jquery html css

Answer 1

Answer №1

Ensure your condition is modulo == 0 instead of modulo = 0. The latter will always set the value of modulo to 0, resulting in false and setting the width to 250 on each click.

$(document).ready(function() {
  var count = 1;
  var modulo = 1;
   
  $("#animateMe").click(function() {
    modulo = count % 2;
    count += 1;
    $("#animateMe").animate(
      {
        width: (modulo == 0 ? 500 : 250)
      }
      
    );
  });
  
  
});

/*
#animateMe {
  background-color: #AAAAAA;
  width: 100px;
  margin: 15px;
  height: 60px;
}
*/

#animateMe  {
  background-color:blue;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="animateMe">
 
</div>

Answer 2

Ensure your condition is modulo == 0 instead of modulo = 0. The latter will always set the value of modulo to 0, resulting in false and setting the width to 250 on each click.

$(document).ready(function() {
  var count = 1;
  var modulo = 1;
   
  $("#animateMe").click(function() {
    modulo = count % 2;
    count += 1;
    $("#animateMe").animate(
      {
        width: (modulo == 0 ? 500 : 250)
      }
      
    );
  });
  
  
});

/*
#animateMe {
  background-color: #AAAAAA;
  width: 100px;
  margin: 15px;
  height: 60px;
}
*/

#animateMe  {
  background-color:blue;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="animateMe">
 
</div>

Answer 3

Answer №2

It has been pointed out by other users that you are attempting an assignment rather than a comparison. To improve readability and adhere to best practices, it is recommended to use triple equality (===) instead of convoluted syntax.

if (modulo === 0) {
   width = 500
}
else {
   width = 250
}

Instead of checking the modulo variable, you can simplify your logic with a straightforward assignment:

$("#animateMe").animate({
   width : 500 - (modulo * 250)
});

Alternatively, you could do:

$("#animateMe").animate({
   width : [500, 250][modulo]
});

(considering that modulo is either 0 or 1)

Trying to use removeClass().addClass() and separate click events resulted in the same issue.

A single click event listener, toggling just one class, can suffice. You can achieve this with plain JavaScript and CSS transitions like so:

CSS

#animateMe  {
  background-color:blue;
  height: 100px;
  width: 500px;
  transition: width 1s 0s;
}

#animateMe.half {
  width: 250px;
}

JavaScript

var el = document.getElementById('animateMe');
el.addEventListener('click', function() {
   this.classList.toggle('half') 
});

Check out the Codepen Demo here

Answer 4

It has been pointed out by other users that you are attempting an assignment rather than a comparison. To improve readability and adhere to best practices, it is recommended to use triple equality (===) instead of convoluted syntax.

if (modulo === 0) {
   width = 500
}
else {
   width = 250
}

Instead of checking the modulo variable, you can simplify your logic with a straightforward assignment:

$("#animateMe").animate({
   width : 500 - (modulo * 250)
});

Alternatively, you could do:

$("#animateMe").animate({
   width : [500, 250][modulo]
});

(considering that modulo is either 0 or 1)

Trying to use removeClass().addClass() and separate click events resulted in the same issue.

A single click event listener, toggling just one class, can suffice. You can achieve this with plain JavaScript and CSS transitions like so:

CSS

#animateMe  {
  background-color:blue;
  height: 100px;
  width: 500px;
  transition: width 1s 0s;
}

#animateMe.half {
  width: 250px;
}

JavaScript

var el = document.getElementById('animateMe');
el.addEventListener('click', function() {
   this.classList.toggle('half') 
});

Check out the Codepen Demo here

I am struggling to run the jQuery animation that adjusts the width more than once

Answer №1

Answer №2

Similar questions

What is the best way to eliminate the background color from one span after selecting a different one?

Animations in Angular fail to operate within mat-tabs after switching back when custom components are being utilized

Create a rectangle on a canvas using coordinates that have been translated relative to the original image

What is the best way to align these Iframes in the center?

Ways to evenly distribute form fields with Bootstrap 4

"Utilizing jQuery to select elements for the purpose of preventing default

What exactly is the significance of "utilizing a universal class name"?

Deactivate the focus state when hovering over different items in the navigation bar

How to reset the value in a select box using jQuery

How can the "Search within page" feature locate words that are divided between different elements?

Javascript failing to choose background color from an array

Premature adjustment of images to window size changes

Stylized widget for showcasing a list of cities for meetups

Ensure that the div element spans the entire width of the screen

"Enhancing User Interactions with Hover Effects and Click Events

In Javascript, the DOM contains multiple <li> elements, each of which is associated with a form. These forms need to be submitted using AJAX for efficient

Calculating dimensions for parents and their children

Form submission fails to trigger AJAX execution

Center and left-align elements

Solution to ensure fixed header with correct z-index placement