Modify the background position in CSS several times

Hi there! I'm looking to create a hover effect where the thumbnail of a video file is previewed, similar to how it's done on www.megavideo.com. However, I'd like to achieve this using a sprite file instead. For example, my thumbnail image is 140px wide and 560px high. What I want is for the background position to switch 4 times (by -140px) when I hover my mouse over it, and for this animation to loop as long as the mouse is hovering. Can anyone assist me with this? Please excuse my poor English and lack of experience with jQuery. Thank you!

Answer №1

Implement an event handler using setTimeout within the context of .hover() in jQuery. This will continuously adjust one axis of the background-position property downwards by 140 pixels every second. Keep track of the return value from setTimeout to be able to cancel it at a later point. If this axis surpasses -140 multiplied by 4 (representing the number of animation frames), reset it back to 0.

You have the option to include a secondary callback function with .hover() which triggers when you cease hovering over the element; utilize this function to revoke the most recent timeout set using clearTimeout.

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

Enhance results by combining data from user input with data retrieved asynchronously from server-side APIs

In the process of developing a web application, I am facing a challenge. There is an input field where users can enter a number and next to it, I want to display the double of that number as the output. While this can be easily achieved using client-side J ...

An issue occurred when attempting to retrieve JSON data using an Ajax

After making an ajax call below, I encountered an error that left me puzzled. The variable 'response' in the success function is structured as follows: {"status": "complete", "username": "test", "error": "0", "message": ""} Surprisingly, when I ...

The value in the dropdown list changes once the page is reloaded

I am facing an issue with the dropdown list that appears on every page of my application's layout. The dropdown contains a list of hotels, and when I select a different hotel from the dropdown, it redirects me to the main page with the updated ID. Eve ...

Creating connections between variables and elements in nested ngRepeats in Angular

I've been facing a challenge with my app where I need to update the comments section whenever a comment is added, edited, or deleted without having to refresh the page. I am using ngResource to handle queries for both articles and comments (e.g. $scop ...

Please provide instructions on how to update a webpage section using ajax/json

Currently, I am in the process of developing a chat website and focusing on managing ONLINE USERS. I have implemented AJAX to handle refreshing data, however, I am facing issues with using Append(); method. Whenever I refresh the section, the same data k ...

Achieving a full-width image display in Bootstrap: A guide

I've been struggling to find a solution to stretch an image across a div using CSS and Bootstrap. I attempted to make both the div and parent container fluid, but no matter what I try, there always seems to be some white space on the left and right si ...

Communicating through Socket.io between various Node.js routes

Building a Node.js application that utilizes the Express Framework and Socket.io has presented me with a challenge. I am struggling to receive messages from the server across different express routes. Is there a method for receiving messages sent from one ...

Steps to validate individual input text fields that create a date and display an error message if the date is not valid

Currently, I am working on a React Material UI component designed to capture a user's 'Date of Birth'. This component consists of three separate inputs for the day, month, and year. In order to enhance this functionality, I would like to im ...

The issue with the Material UI Drawer component is that it is casting a shadow even when

Having some trouble with the Material UI Drawer component. Whenever I try to display it on my webpage, it automatically focuses on the inner div, adding a shadow or border if the focus is anywhere else. Does anyone know why this shadow appears and how to r ...

Establish a connection between the MySql database in WHM (phpmyadmin) and a node.js application

Our team has been working on setting up the database connection with Mysql using node.js in Cpanel. Although I didn't create the database myself, I have all the necessary information such as the host, user, password, name of the database, and port nu ...

``Do not forget to close the modal window by clicking outside of it or

I am looking for a way to close the modal window either when a user clicks outside of it or presses the escape key on the keyboard. Despite searching through numerous posts on SO regarding this issue, I have been unable to find a solution that works with ...

Encountering an error in Next.js with the message 'NextRouter was not mounted'

When attempting to retrieve the input value and redirect to '/search/${searchvalue}', where 'searchvalue' represents the input value, I encountered an error stating 'Error: NextRouter was not mounted'. More information can be ...

Is it possible for inline-block list items to wrap words onto new lines?

I'm working on displaying a series of details within an unordered list inline, but facing an issue with some list items being too long for the relatively small area available. This is the unordered list I'm adding to my view: "<ul class=&apo ...

Preventing the Vue compiler from managing static assets: A step-by-step guide

In my Vue 3 application, I have a variety of static assets that are organized in their own file structure separate from the app's source directory. Fortunately, my web server is configured to serve files from both the Vue build directory and the stati ...

What is the best way to customize the appearance of an Angular tree component?

I'm attempting to incorporate the style of the ACE Admin theme into the angular-tree-component. Currently, my tree looks like this: https://i.sstatic.net/ktiEf.png However, I desire to apply styles from the Angular tree guide in order to achieve a ...

Limit selection choices in select element

Similar Question: Prevent select dropdown from opening in FireFox and Opera In my HTML file, I have a select tag that I want to use to open my own table when clicked. However, the window of the Select tag also opens, which is not desirable. Is there a ...

Is it possible to activate a function in an express application when it is terminated?

I am looking for a way to handle server termination events by dumping data to disk. I'm wondering if there is a better way than logging everything in a database every few seconds using setTimeout. One possibility could be: app.on("event:terminate", ...

Exploring the process of acquiring a button using refs in external JavaScript

Having encountered a situation where I have two different javascript files, I came across an issue. The first file contains a finish button that was initialized by using refs. Now, I need to access this button in the second file using refs. The code snipp ...

Using keys with a hyphen (-) in Jquery templates

My JSON array has a key 'BASIS-TYPE'. When I try to use this value in the markup: <html> <head> <script src="/js/jquery-1.7.min.js"></script> <script src="/js/jquery-plugins/jquery.tmpl.min.js"></script> < ...

Tips for shifting icons from the left to the right when collapsing a sidebar menu

Trying to solve a challenge with the sidebar width transition! How can I move icons to the right only when the sidebar is at a width of 50px, within the specified area? The current look: https://i.sstatic.net/GIc4n.png Desired outcome: https://i.sstati ...