How can I smoothly animate a DIV over a background in both directions?

Unfortunately, the full example I wanted to share is no longer available online. Let me try my best to describe it instead.

The idea is to have a continuous looping video as the full-screen background. On top of that, there will be a DIV containing another video that moves slowly back and forth across the screen.

Here's an animation example, but it moves too quickly:

Check out the sample on JSFiddle

HTML CODE

<div style='position:absolute; background-color: blue; height: 50px; width:50px;'></div>

JS CODE

setInterval(function(){
    $("div").stop(true,true).animate({left: 300}, 10000, 
          function(){ $(this).stop(true,true).animate({left: 0}, 1000); 
    });
}, 20000);

I'm not very familiar with JavaScript, so I could use some help figuring out the timing aspect of this project.

Thank you in advance!

javascriptjquerycssanimationjquery-animate

Answer №1

In the animate function, the second argument determines the duration of the animation, dictating how quickly it will move. Currently set at 1000 (1000 milliseconds or 1 second), increasing this number will slow down the animation. However, the setInterval function will pause the animation and restart it after 2 seconds, so the total duration needs to account for both intervals. This means there will be a delay before the animation begins. See it in action here. To have the animation loop indefinitely, follow this method: http://jsfiddle.net/bypepLf9/1/

Remember that you are running two separate animations, one moving right and the other left. They can trigger each other upon completion since the final argument is a callback function executed when the animation finishes.

To learn more about jQuery animate, visit http://api.jquery.com/animate/, although achieving this effect with pure CSS is also possible.

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

Maintaining hover functionality of menu button while navigating through sub-menu options

Creating a CSS dropdown menu is straightforward, but maintaining the hover state on the main menu button while navigating through the dropdown selections can be tricky. In the past, I used JavaScript to change the class and retain the background image, but ...

cssdrop-down-menu

Integrate jQuery into your Django project

Having trouble integrating jQuery into my Django app. Not sure what went wrong as the button click is not producing any results. Here's a snippet of my code: base.html {% load static %} <html> <head> <link rel ...

jquerydjango

Hidden form in JavaScript does not submit upon clicking the text

My previous question was similar to this but with a smaller example. However, the issue with that code differs from my current code. (If you're curious, here's my previous question: JavaScript Text not submitting form) Currently working on my fi ...

javascriptphpjqueryhtmlforms

The reduce function is displaying an undefined result

Check out this code snippet: const filterByType = (target , ...element) => { return element.reduce((start, next) =>{ if(typeof next === target){ start.push(next) } } , []) } I'm trying to achieve a specific g ...

javascript

Discover the method for storing multiple values in local storage using a dictionary with JavaScript

I have a scenario in my code where I need to update a value without storing a new one. Let's say I need to input values in the following format: { firstname:'kuldeep', lastname:- 'patel' } After entering the values, they g ...

javascriptjqueryhtmlarrays

Updating the input value in a React application

With a list and an edit button, upon clicking the edit button, a new modal opens. How can I auto-populate the selected username email? The server-side response is {this.test.name}, where I provide him with the input value to auto-populate. However, when ...

javascriptreactjs

Locating the link to an image

Currently, I have implemented a Python web crawler to gather images from Google search results. The process involves using Selenium to navigate through the search page and Beautiful Soup to extract all relevant elements. While some images have direct URLs ...

javascriptjquerypythonimageselenium

Resolving CSS Conflict in Panels with Legacy Bootstrap

I have recently implemented Panels from Bootstrap 3 with the older version of Twitter-Bootstrap. My challenge lies in adding the well class to the panel body, as it results in excessive padding. This was not an issue when using BS3, leading me to believe ...

csstwitter-bootstrap

Is there a way to confirm if all div elements have a designated background color?

I have a scenario where I have dynamically added several divs with a specific class to my webpage. These divs change color when the user hovers over them. I am trying to trigger a specific function once the last div has been set to a particular backgroun ...

javascriptjqueryhtmlcss

Can you navigate between slides with JQuery?

Looking to create a website similar to . The only obstacle I am encountering is understanding the code. I prefer using JQuery over MooTools. Is there anyone who can kindly assist me by providing a demo? I want to implement the functionality of switching b ...

jqueryajaxslide

Discovering the form through a click event using jQuery

$(function() { $('.offer-wrapper').click(function (e) { if ($(e.target).hasClass('form')) { return // perform an action if a form is present } }); }); <script src="https://cdnjs.cloudflare.com/ajax/lib ...

javascriptjqueryhtml

I'm having difficulty saving a key-value pair in a log file

const FileHasher = require("./FileHasher"); if (process.argv.length < 3) { console.log("Please provide a program file and one argument."); process.exit(1); } const filename = process.argv[2]; const fs = require('fs'); const file = fs.rea ...

javascriptnode.jsappend

Automatically rehydrate an instance using Angular and JavaScript

REVISION Special thanks to Shaun Scovill for providing an elegant solution using lodash // Creating an instance and injecting server object - within the ChartService implementation below var chart = new Chart(serverChartObject); // Replacing ...

javascriptangularjs

Deciphering JavaScript's Minus Equals Operator: What's the Significance?

Can you explain the significance of the minus equals symbol -= in the following code snippet? $('#wrapper').animate({ backgroundPosition: '-=2px' })(); Appreciate your help! ...

javascriptjqueryoperators

The HTML navbar menu icon shifts downward by one line on smaller screens

Here is my code snippet: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#"><img src="vc-transp.png" height="50px" style="margin-left: -30px;"></a> <button class="navbar-toggler" ...

htmlcssbootstrap-4

Invalid prop type: A form field received a `checked` prop without a corresponding `onChange` handler

In my project, I have a Parent Component called CandidateList and a Child Component called Candidate. The CandidateList component has a Select All checkbox that triggers a function to set the state when candidates are being selected, and then passes that s ...

javascriptreactjs

"Encountering issues with getStaticPaths not generating any paths

I have a folder named data which contains a file called events.ts: export const EventsData: Event[] = [ { name: 'School-Uniform-Distribution', images: ['/community/conferences/react-foo.png', "/community/conferences/react ...

javascriptreactjstypescriptnext.js

Looking to extract data from an HTML form?

In my HTML form, I am dynamically creating elements and setting their name and value attributes. When I try to access the value using document.formname.nameoftheelement.value, I receive an error stating that the value is undefined. I then attempted to us ...

javascripthtml

Creating a dynamic table based on selected dropdown option

I need to create a dynamic table of questions depending on the user's selection from a dropdown menu. When the user chooses a category, I want to pass that information to an API using the GET method. My controller is built using AngularJS. However, I ...

javascripthtmlangularjs

My webpage is struggling to locate the CSS stylesheet

Regarding the index file: <link rel="stylesheet" href="css/stylesheet.css"/> Everything seems to be working fine here. However, the rest of my html documents are located in a folder called "pages". I'm facing an issue where it can't loca ...

htmlcss