Animate with ease upon mouse entry into the div

I have a question about hovering.

$(".hover li img").mouseenter(function() {
    $(".overlay").animate({
        left: pixels+"px"
    });
});

The overlay class is a transparent box around the image, with a red border.

I want the border to move when hovering over an image. This is not a problem for me. The issue arises when I hover over multiple images quickly. The overlay class stops briefly at each image.

My question is: How can I prevent the overlay class from stopping at each image when moving the mouse over them quickly? I would appreciate any help or suggestions. Thank you.

javascriptjqueryhtmlcsshover

Answer №1

My recommendation is to calculate the left position based on the current image's offset left, as shown in the example below:

$(".hover li img").mouseenter(function() {
that  = this;
  $(".overlay").stop(true,false);
$(".overlay").animate({
    left: that.offset().left+"px"
});
 });

Alternatively, you can also use the following code snippet:

$(".hover li img").mouseenter(function() {

  $(".overlay").stop(true,false);
 $(".overlay").animate({
    left: pixels+"px"
});
 });

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

What could be causing the unexpected behavior in my NgMessages form validation?

I have developed a code that incorporates Angular JS form validation methods. There are two separate forms within the codebase, The initial form utilizes basic form validation while the second form employs ng-messages, However, an issue has arisen wher ...

javascriptangularjs

Turn off drag and drop functionality and activate selection in HTML

Recently, I encountered a strange issue where selected text became draggable and droppable onto other text, causing it to concatenate. To resolve this problem, I added the following code: ondragstart="return false" onmousedown="return false" However, thi ...

javascripthtml

An expected expression was encountered near the if condition

I am encountering an expression expected error in Visual Studio near if(isNullOr ........ if (value) { if (isNullOrUndefined(x.value) && isNullOrUndefined(x.value2)) { x.minMark + '-' + a + '*' + x.b + ' ' + ...

javascriptreactjs

The local ESlint plugin is causing issues with installing dependencies on our CI environment

I have developed a personalized ESLint plugin specifically for one project and have not made it public. It is saved in a folder within my project because I only intend to use it internally, and I see no need to create a separate repository for it. However, ...

javascriptnpmeslinteslintrc

What is the best way to constrain the ratio of a full-width image display?

I am in need of a solution for displaying an image at full width inside a frame with a 16:9 aspect ratio. The image needs to be centered within the frame and adjust responsively when resizing the screen. My preference is to achieve this using just CSS. ...

htmlcss

Learn how to swap out the traditional "back to top" button with a customized image and make it slide onto or off the page instead of simply fading in and out

As a newcomer, I am trying to replicate a unique "back to top" effect that caught my eye on another website. Instead of the traditional fade-in approach when scrolling down, the "back to top" image in question elegantly slides out from the bottom right c ...

javascriptjqueryhtmlcss

Which function is triggered first - onclick or ng-click?

Currently, I have a button with a validation process occurring on click. The validation process triggers a web service call and other processes if successful. However, I'm uncertain if the validation is actually taking place. This is my page setup: ...

javascriptangularjs

I designed an innovative contact form utilizing mail function, yet unfortunately, the emails generated from it persistently land in spam folders. Below is the code I

I have created a contact form using the mail function, but all the emails are ending up in the spam folder. Here is my code: <?php // CODE FOR SENDING EMAILS if(isset($_POST['submit'])){ $to = "<a href="/cdn-cgi/l/email-protectio ...

phphtmlcontact-form

What could be causing the model to not bind correctly in nodejs?

In the process of developing a web app with nodejs, angular, and mongo, I have encountered a strange issue. The model is not binding properly from the JSON object. Here is my Schema: var mongoose = require('mongoose'); var productSchema = new ...

javascriptjsonnode.jsmongodb

Tips for transferring a file to PocketBase using NodeJs

Currently, I am in the midst of a project that necessitates uploading numerous PDF files to a PocketBase collection. All the necessary files are saved on my computer and my goal is to upload them using nodejs along with the PocketBase JavaScript SDK. Howe ...

javascriptnode.jsfile-uploadpocketbase

I'm currently working on incorporating a rating system into my Vue.js project, but I am struggling to successfully pass the rating values

After carefully reviewing the documentation, I implemented the code below. While I am successfully retrieving data for enquiryDesc, I am encountering null values for rating. Despite trying various troubleshooting steps, the issue with null values persists. ...

javascriptvue.jsvuejs2vue-componentvue-router

HTML5 Dragend event failed to trigger in Firefox

While working on my project, I encountered an issue where the 'dragend' event is not fired in Firefox 22.0 on Ubuntu but works perfectly fine in Chrome. I have written a logic to make changes on drag start and revert them if drop fails, triggered ...

javascriptjqueryhtmldrag-and-drop

The Rtk query function does not generate endpoints

Having trouble with code splitting in RTK-query, it's not working for me and I can't figure out why App.jsx import React from "react"; import { Provider } from "react-redux"; import store, { persistor } from "store" ...

javascriptreactjsreduxredux-toolkitrtk-query

Transfer an object for reusability in a different JavaScript file without utilizing the default operator

I have a scenario where I have two files organized in a tree structure that defines an object. The first file is called common.js. export default { table: { actions: { save: 'Save', delete: 'Delete', update: ...

javascriptobjectexport

ng-repeat not functioning properly with data defined in XMLHttpRequest

I have a problem with my HTML and AngularJS code. Initially, I defined the list in my controller which worked fine: <li ng-repeat="a in idmasVesselstableList"><a>{{a.table_name}}</a></li> And here is how I set up the controller: ...

javascriptangularjsxmlhttprequestangularjs-ng-repeat

Can a webpage be redirected to another page after an animation using only HTML and CSS?

My goal is to design a landing page that has a button allowing users to trigger an animation before being redirected to another page. This concept involves adding a captivating element before transitioning between pages, similar to a link with a dynamic ...

htmlcss

Looking for some help with tweaking this script - it's so close to working perfectly! The images are supposed to show up while

Hey everyone, I'm struggling with a script issue! I currently have a gallery of images where the opacity is set to 0 in my CSS. I want these images to become visible when scrolling down (on view). In this script, I have specified that they should app ...

javascriptjquerycss

Discover the ultimate guide to creating an interactive website using solely JavaScript, without relying on any server-side

I'm facing a challenge: I have a desire to create a website that is mainly static but also includes some dynamic components, such as a small news blog. Unfortunately, my web server only supports static files and operates as a public dropbox directory. ...

javascripthtmlajaxweb

Guide on implementing image tag and source in Django template language system

I need to include a base64 encoded image in JSON format into a Django HTML template. What is the best way to do this? <img src="R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp(Some 64 bit image);base64 /> How can I properly translate this code snippet into my ...

htmlcssjsondjangoencode

Using jQuery Mobile to Recycle a Header and Navigation

I'm a beginner when it comes to jQuery Mobile and I'm struggling to grasp the concept of reusing headers and general navigation. Currently, I have a header with a menu button on the right. When the menu button is clicked, a popup shows up with l ...

jqueryhtmljquery-mobilenavigation