Sliding a div with JavaScript

Question

Sliding a div with JavaScript

I've been searching for a solution to make a div slide to the side after 2 seconds using JavaScript, but I haven't found one that quite fits what I'm looking for. Here's my current code:

setTimeout("slide()", 1000)

function slide() {

  var myElement = document.querySelector("#box");
  myElement.style.left = 200px;

  setTimeout("slide()", 2000)

};

#box {
  position: absolute;
  left: 100px;
  top: 100px;
  width: 300px;
  height: 300px;
  background: blue;
}

<div id="box">box</div>

If there's anything wrong with my approach or if you can point me in the right direction with a helpful resource, it would be greatly appreciated! Thanks

javascript html css interactive

Answer 1

Answer №1

To make the correction:

myElement.style.left = '200px';

Instead of:

myElement.style.left = 200px;

And for this change:

setTimeout(slide, 2000);

Instead of using:

setTimeout("slide()", 2000);

Answer 2

To make the correction:

myElement.style.left = '200px';

Instead of:

myElement.style.left = 200px;

And for this change:

setTimeout(slide, 2000);

Instead of using:

setTimeout("slide()", 2000);

Answer 3

Answer №2

When using setTimeout, make sure to pass a function as its first argument rather than a string. Additionally, avoid misfires by taking note of the ()

To correctly utilize setTimeout, follow this format:

setTimeout(slide, 1000);

function slide() {

  var myElement = document.querySelector("#box");
  myElement.style.left = '200px'; // Be mindful of this!

  setTimeout(slide, 2000)

};

Answer 4

When using setTimeout, make sure to pass a function as its first argument rather than a string. Additionally, avoid misfires by taking note of the ()

To correctly utilize setTimeout, follow this format:

setTimeout(slide, 1000);

function slide() {

  var myElement = document.querySelector("#box");
  myElement.style.left = '200px'; // Be mindful of this!

  setTimeout(slide, 2000)

};

Answer 5

Answer №3

Incorrect usage of the setTimeout function can be rectified by utilizing a style string.

setTimeout(function(){slide();}, 1000);
function slide() {
  var myElement = document.querySelector("#box");
  myElement.style.left = "200px";
  setTimeout(function(){slide();}, 2000);
}

Alternatively, you can simplify it to:

setTimeout(slide, 1000);
function slide() {
  var myElement = document.querySelector("#box");
  myElement.style.left = "200px";
  setTimeout(slide, 2000);
}

The first option is preferable if you need to pass parameters like so:

setTimeout(function(){slide(2000);}, 1000);
function slide(delaytime) {
  var myElement = document.querySelector("#box");
  myElement.style.left = "200px";
  setTimeout(function(){slide(delaytime);}, delaytime);
}

Answer 6

Incorrect usage of the setTimeout function can be rectified by utilizing a style string.

setTimeout(function(){slide();}, 1000);
function slide() {
  var myElement = document.querySelector("#box");
  myElement.style.left = "200px";
  setTimeout(function(){slide();}, 2000);
}

Alternatively, you can simplify it to:

setTimeout(slide, 1000);
function slide() {
  var myElement = document.querySelector("#box");
  myElement.style.left = "200px";
  setTimeout(slide, 2000);
}

The first option is preferable if you need to pass parameters like so:

setTimeout(function(){slide(2000);}, 1000);
function slide(delaytime) {
  var myElement = document.querySelector("#box");
  myElement.style.left = "200px";
  setTimeout(function(){slide(delaytime);}, delaytime);
}

Sliding a div with JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to instantly show the contents of a newly opened tab in BootstrapVue?

Updating jQuery event behaviors based on the value of .html( 'string' )

Automatically sending form submission after 5 seconds

Issue: The serializer is receiving more than one value for the 'instance' argument

Tips for displaying content when clicking on the opener containing tables or div elements

How to deactivate an option in md-autocomplete

Tips for retaining the original text value even after clicking the submit button

There are certain lines of JavaScript/Node.js code that are failing to execute

Developing 2 potential results from textarea input using NODE.JS and HTML

Interacting with JSP through session management

Encountering error notifications when attempting to install Node npm

Manipulate the 'i' variable within a for loop using JavaScript, JQuery, and JSON to modify an attribute

Turn text 90 degrees creating a div that is positioned inside its parent container

Struggling to reach global variables in AngularJS?

Adjust the top value of a tooltip in Foundation 4

All promises in the Promise.all() function are resolved instantaneously

Java and Selenium: Struggling to Find Element based on Attribute

What is the most effective method for obtaining data from a user and transmitting it to the game's processing system?

Utilize JQuery to implement fading effects for clicked elements in a webpage

Issues have been reported regarding compatibility between iOS7, jquery.touchSwipe, on click and webkit-touch-callout