Reversing JQuery animations can be achieved by using the `

Question

Reversing JQuery animations can be achieved by using the `

As someone who is relatively new to JQuery and web development, I find myself in need of assistance. Despite researching for a few days, I have not been able to find a solution that meets my requirements. While browsing through various forums, I noticed that similar questions have been asked numerous times, but most of the answers provided are outdated given the current release of JQuery.

The issue at hand is that I have a 'div' element that I want to be centered on the screen when clicked. This functionality is working as expected. However, I am struggling to make the same 'div' return to its original position when clicked for the second time.

$(document).on("page:change", function() {
  $("#profile").on ("click", function() {
    $("#profile").animate({right: '15%', height: '+=50px', width: '+=25%'});
    $("#profile").css("position", "absolute"); // To maintain normal position within bootstrap grid during animation
    $("#fadeback").css("opacity", 0.6).fadeIn(300); // Fades other elements on the page
  });
});

I am primarily looking for a way to revert these operations upon a second click. If you have an alternative approach that differs from my current implementation, I am open to exploring it. Thank you in advance for your assistance!

jquery html css jquery-ui jquery-animate

Answer 1

Answer №1

Here is a suggestion for you to try:

function initialAction() {
    alert('Execute your animation here');
    $(this).one("click", reverseAction);
}
function reverseAction() {
    alert('Reverse your animation here');
    $(this).one("click", initialAction);
}

$("#profile").one("click", initialAction);

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

Integrate this code with yours:

function initialAction() {
   $("#profile").animate({right: '15%', height: '+=50px', width: '+=25%'});
    $("#profile").css("position", "absolute"); // Maintain div's position in Bootstrap grid during animation
    $("#fadeback").css("opacity", 0.6).fadeIn(300); // Fades other elements on the page
  });
}
function reverseAction() {
// Reverse the animation here
}


$(document).on("page:change", function() {
$("#profile").one("click", initialAction);
});

Answer 2

Here is a suggestion for you to try:

function initialAction() {
    alert('Execute your animation here');
    $(this).one("click", reverseAction);
}
function reverseAction() {
    alert('Reverse your animation here');
    $(this).one("click", initialAction);
}

$("#profile").one("click", initialAction);

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

Integrate this code with yours:

function initialAction() {
   $("#profile").animate({right: '15%', height: '+=50px', width: '+=25%'});
    $("#profile").css("position", "absolute"); // Maintain div's position in Bootstrap grid during animation
    $("#fadeback").css("opacity", 0.6).fadeIn(300); // Fades other elements on the page
  });
}
function reverseAction() {
// Reverse the animation here
}


$(document).on("page:change", function() {
$("#profile").one("click", initialAction);
});

Reversing JQuery animations can be achieved by using the `

Answer №1

Similar questions

Icon: When clicked, initiate a search action

What is the best way to retrieve the items stored within the array generated by a JavaScript function?

The attribute selector appears to be malfunctioning due to a syntax error, resulting in an unrecognized expression

Tips for customizing WTForm fields with unique CSS classes

dompdf - adjust page margins starting from the second page

Using Jquery to dynamically adjust select options based on the value of another select option

Styling with CSS in Zend Framework

What are the best ways to incorporate EMs and percentages into responsive web design?

Can you explain the distinction between <P> and <p> tags in HTML?

Apply styles specifically to elements that contain a child element

Divergent behavior of SVG elements in Firefox versus Chrome with HTML5

Changing text size on the fly with CSS

How can I make a div move to the position of another div and stay with it when the screen is resized?

polygon with five or more sides

a fixed width layout with two columns aligned at the top

Align the content at the center within a Bulma column

How to implement downloading a PNG image with a click using Bootstrap 4 and JavaScript

Instructions on adding a class to the parent element when the child has a particular class

What is the best way to send a List in the model as a parameter for an AJAX request?

When the page height is altered in real-time, it prompts a scroll event