Revert animation back to its initial position with the help of JavaScript

Question

Revert animation back to its initial position with the help of JavaScript

After implementing the script below, I successfully managed to shift my image to the right upon clicking:

<script>
var myTimer = null;

function move(){
    document.getElementById("fish").style.left = 
        parseInt(document.getElementById("fish").style.left)+1+'px';
}


window.onload=function(){

    document.getElementById("fish").onclick=function(){
        if(myTimer == null){
            myTimer = setInterval("move();", 10);
        }else{
            clearInterval(myTimer);
            myTimer = null;
        }
    }
}
</script>

I am facing difficulty in reverting the picture to its original position without relying on jQuery.

Your assistance with this matter would be greatly appreciated.

javascript

Answer 1

Answer №1

To store the initial position in advance allows for resetting it back to that value later:

let initialPos = document.getElementById("fish").style.left;

function revertPosition() {
    document.getElementById("fish").style.left = initialPos;
}

Answer 2

To store the initial position in advance allows for resetting it back to that value later:

let initialPos = document.getElementById("fish").style.left;

function revertPosition() {
    document.getElementById("fish").style.left = initialPos;
}

Answer 3

Answer №2

Implementing external JavaScript is crucial for efficiently managing code:

var previousOnload = onload, element, documentObj, bodyElement;
onload = function(){
if(previousOnload) previousOnload();

documentObj = document; 
bodyElement = documentObj.body;

element = function(id){
  return documentObj.getElementById(id);
}

var fishElement = element('fish'), timerObject;

fishElement.onclick = function(){
  if(!timerObject){
    timerObject = setInterval(function(){
      fishElement.style.left = parseInt(fishElement.style.left)+1+'px';
    }, 10);
  } else {
    clearInterval(timerObject); timerObject = false;
    fishElement.style.left = '0'; // please update with your CSS `left:`value
  }

}// end of onload function

Answer 4

Implementing external JavaScript is crucial for efficiently managing code:

var previousOnload = onload, element, documentObj, bodyElement;
onload = function(){
if(previousOnload) previousOnload();

documentObj = document; 
bodyElement = documentObj.body;

element = function(id){
  return documentObj.getElementById(id);
}

var fishElement = element('fish'), timerObject;

fishElement.onclick = function(){
  if(!timerObject){
    timerObject = setInterval(function(){
      fishElement.style.left = parseInt(fishElement.style.left)+1+'px';
    }, 10);
  } else {
    clearInterval(timerObject); timerObject = false;
    fishElement.style.left = '0'; // please update with your CSS `left:`value
  }

}// end of onload function

Answer 5

Answer №3

Everything seems to be in order here,



    
    let timer = null;
    let startPosition = 0;

    function swim(){
        document.getElementById("fish").style.left = 
            parseInt(document.getElementById("fish").style.left) + 1 + 'px';
    }


    window.onload=function(){

        document.getElementById("fish").onclick=function(){
            if(timer == null){
                startPosition = document.getElementById("fish").style.left;
                timer = setInterval("swim();", 10);
            }else{
                clearInterval(timer);
                timer = null;
                document.getElementById("fish").style.left = startPosition + "px";
            }
        }
    }

Answer 6

Everything seems to be in order here,



    
    let timer = null;
    let startPosition = 0;

    function swim(){
        document.getElementById("fish").style.left = 
            parseInt(document.getElementById("fish").style.left) + 1 + 'px';
    }


    window.onload=function(){

        document.getElementById("fish").onclick=function(){
            if(timer == null){
                startPosition = document.getElementById("fish").style.left;
                timer = setInterval("swim();", 10);
            }else{
                clearInterval(timer);
                timer = null;
                document.getElementById("fish").style.left = startPosition + "px";
            }
        }
    }

Revert animation back to its initial position with the help of JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Issue with React: Reading the 'pathname' property from undefined is not possible

Why do I keep receiving values only from the initial form? What could be the issue?

"Encountering a puzzling issue with Django Rest Framework where the path setup is functioning for one link but not for

Audio Playlists and Dynamic Loading with WordPress Shortcode

Discover a technique to display every individual "echo" statement from PHP in sequence, rather than waiting for the entire script to finish executing

What is a way to adjust the width of fixed columns in a Bootstrap 4.0 responsive table?

Encountering a 401 error message with a 'truncated server' response while using Google Apps Script

Transmit information from the frontend to the backend using JavaScript and the Express framework

Step-by-step guide to start an AngularJs application using TypeScript

Retrieve the route from a specific node in the jstree structure

Create dynamic cells for CSS grid using JavaScript

Using ReactJS and react-router to exclude the navigation menu on the login page

Alter the onSeries property dynamically

Adding EventListeners for Click Handling: A Step-by-Step Guide

Traverse JSON object as a string

What's the best way to showcase data in a column dynamically depending on its specific columns?

Having trouble getting my local website to load the CSS stylesheet through Express and Node.js in my browser

JavaScript - Declaring canvas as a global object

Utilizing Angular routing in HTML5 mode within a Node.js environment

Add axios requests to the axios.all array