Rotate images with animation using Javascript

Seeking assistance with a swinging motion using two simple functions in Javascript. As a newcomer to the language, I am looking for guidance to achieve my goal.

First function:

function up() {
imgObj.style.left = parseInt(imgObj.style.transform = 'rotate(45deg)');

// This function creates the upward swinging motion.

function down() {

`imgObj.style.left = parseInt(imgObj.style.transform = 'rotate(27deg)'); // This function returns back to the original state.

While I can make both functions work separately, I need to call them in the following order:

up(); 
 down() // After 0.5 seconds
 up() // Another 0.5 seconds after calling down()
and down() // 0.5 seconds after the previous up() call

.

I have tried using setTimeout(function, timedelay) without success. Any help would be appreciated greatly.

Answer №1

To implement a timer, start by defining it within the onLoad function:

<body onLoad="setTimeout(updateContent(),1000)">

Initialize a variable at the beginning of your script:

var status = 1;

Next, define the updateContent() function:

function updateContent(){
if(status==1)
  {show();status=0;}
  else
  {hide();status=1;}
}

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

Does the Node Schedule library create new processes by spawning or forking them?

Is the node-schedule npm module responsible for spawning/forking a new process, or do we need to handle it ourselves? var cron = require('node-schedule'); var cronExpress="0 * * * *"; cron.scheduleJob(cronExpress, () => { //logger.info(" ...

Passing a method as a parameter type

As I delve into learning JavaScript from Objective-C, I find myself pondering whether it is possible to have a method with parameter types in Objective-C. Let's take the example of the findIndex() JavaScript function that identifies and returns the in ...

The HTML file contains the complete version number of Firefox

If you're an expert in HTML, take a look at my expandable start page. I know there's room for improvement, and I'm seeking advice on automatically updating the Firefox browser version number in line 106 of the code snippet below. (Linux Mint ...

Update the icon with the adjusted API information

I am currently working on a website that revolves around the theme of weather. I have reached a point in the development process where I need the icon to change according to the current weather conditions. let updateIcon = () => { let ic ...

Error code E401 is being encountered with npm, indicating either an incorrect password has been provided or the

My Node version is 10.15.0 and my NPM version is currently at 6.8.4. After updating npm to 14.16.0 and node to 7.6.2, I encountered the following error - npm ERR! code E401 npm ERR! Incorrect or missing password. npm ERR! If you were trying to log in, ...

Trouble with AJAX Post Request: Missing JSON Response

Below is the AJAX request I have created: var data = modalDom.find("form").serializeObject(); data["returnJson"] = true; $.ajax({ type: "POST", url: "/companies/edit/", data: data, dataType: "JSON", success: function (result) { ...

Learn how to retrieve the TextBox value from a button click within a Nested Gridview

I am trying to extract the value of a textbox inside a Nested Gridview using jQuery in ASP.NET. When a Button within the Nested Gridview is clicked, I want to display the textbox value in an alert box. Here is an example setup: <asp:GridView ID="Grid ...

Unraveling the mysteries of JQuery AJAX POST and Serialization techniques!

I am struggling to implement an AJAX request using JQuery to validate and submit a form, extract its values, and assign them to variables for further use. Unfortunately, I lack a clear understanding of AJAX functionality as well as how serializing works. ...

What is the method for setting a default image to be preloaded in filepond?

Currently, I am working on a Laravel view for editing a record which includes an associated image. My goal is to have the image preloaded inside the input file so that when you submit the form, the same image is sent or you can choose to change it. // Con ...

A guide to performing a LEFT JOIN on two JSON data sources from external URLs

I've been attempting to achieve the following outcome using external JSON data but haven't had any luck finding a solution on search engines or forums. Can anyone provide assistance with this? Thank you in advance. people = [{id: 1, name: "Tom" ...

Issue with PHP's ng-click not functioning properly with Angular JS's dynamic HTML generation

I'm just starting out with Angular JS. I'm trying to create an ng-click event in dynamically generated HTML from PHP, here's the code snippet. var app = angular.module('pageapp',[]); angular.module('pageapp') .filter(& ...

There seems to be an issue with the package not running at xxx:yy in React

As I work on developing a standalone Android app using React Native, the installation of react-native-fcm has led to a persistent error message appearing: The Gradle file in my project appears as follows: // Top-level build file where you can add configu ...

Sometimes, the `undefined` TypeError can unexpectedly pop up while making Ajax calls

Here is my issue with AJAX request and response: I have around 85 HTML pages that all use the same AJAX request. However, when working with these files, I sometimes encounter the following error. AJAX $(document).ready(function(){ localStorage.setIte ...

Display the loading status while fetching data

I recently implemented a code snippet that allows users to download files to cache for offline viewing. You can check it out here: While the code works well, I've noticed that for larger files, the loading process can be a bit slow. I am looking for ...

Adjusting the width of the rail in Material UI's vertical Slider component in React

After attempting to adjust the width and height of the rail property on the material ui slider I obtained from their website demo, I have encountered an issue with changing the thickness. import React from "react"; import { withStyles, makeStyles } from " ...

What is the best way to connect a nested Vuex object to a Vue.js property within the Tiptap text editor?

I'm attempting to connect the nested Vuex state object to the editor property of the tiptap's editor-content component. The structure of the state is as follows: <template> <table :style="{ backgroundColor: element.options.ba ...

Read through the text, determine the length of each word, and keep track of how

Objective: Create a JavaScript program that takes input from users in the form of several lines of text and generates a table displaying the count of one-letter words, two-letter words, three-letter words, etc. present in the text. Below is an example ou ...

Gulp-sourcemaps now exclusively provides the source JavaScript file

Whenever I try to use sourcemaps, I only get the source value returned no matter what. Broswerify.js // if custom browserify options are needed var customOptions = { entries: ['./frontend/js/app.js'], debug: true }; var finalOpts = assi ...

What could be causing my select value to stay unchanged? Issue with the "selected" attribute or property

var original_role = $('option:selected', '#user_role').val(); $('#role_cancel').click(function() { //console.log(original_role); $('option:selected', '#user_role').removeAttr('selected'); //des ...

Determine the value of an object by iterating through its keys

UPDATE: (for clarification) I currently have a table named modelCoa +----+----------+-------+--------------------+ | id | id_parent| code | name | +----+----------+-------+--------------------+ | 1 | 0 | 1 | asset ...