The issue of elements flickering while being hidden and shown with jQuery has been observed in both Chrome and

Having trouble with a simple animation using jQuery? While it may work smoothly in Firefox, you might be experiencing flickering in Chrome and Edge. Check out this jsfiddle for reference:

HTML

<div id="boxes-wrapper">
  <div class="box"></div><div class="box"></div><div class="box"></div>
</div>

CSS

.box {
  width: 150px;
  height: 150px;
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: top;
}

.box:first-child {
  background: pink;
}

.box:nth-child(2) {
  background: skyblue;
}

.box:nth-child(3) {
  background: gold;
}

.box.hover {
  position: relative;
  z-index: 20;
}

html, body {
  position: relative;
  width: 100%;
  height: 100%;
}

#shadow {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  background: black;
  opacity: 0.7;
  z-index: 10;
  width: 100%;
  height: 100%;
}

JavaScript

$('.box').hover(function() {
    $(this).addClass('hover');
  $('#shadow').show();
}, function() {
    $(this).removeClass('hover');
  $('#shadow').hide();
});

If you've been scouring Stack Overflow for solutions to eliminate this flicker issue without success, you're not alone.

javascriptjquerycssgoogle-chromeanimation

Answer №1

It seems that the issue lies in your overlay covering the non-hovered boxes, requiring it to be removed in order to hover over the others.

The flickering effect is a result of the space between the boxes - when the mouse moves away, the overlay disappears.

To resolve this, a combination of CSS and moving the hover action for the overlay to the box wrapper is necessary (see comments in the code):

// Remove overlay from individual boxes:
$('.box').hover(function() {
  $(this).addClass('hover');
}, function() {
  $(this).removeClass('hover');
});

// Add hover functionality to the box wrapper:
$('#boxes-wrapper').hover(function() {
  $('#shadow').show();
}, function() {
  $('#shadow').hide();
});
html,
body {
  position: relative;
  width: 100%;
  height: 100%;
}
#boxes-wrapper {
  float: left;
}
.box {
  width: 150px;
  height: 150px;
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: top;
}
.box:first-child {
  background: pink;
}
.box:nth-child(2) {
  background: skyblue;
}
.box:nth-child(3) {
  background: gold;
}
.box.hover {
  position: relative;
  z-index: 20;
}
#shadow {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  background: black;
  opacity: 0.7;
  z-index: 10;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Allows mouse hover to "go through" the overlay */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxes-wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<div id="shadow"></div>

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

Create a separate server session specifically for handling an ajax request?

Currently, I am working with a collection of PHP server-side scripts that manage user session state by utilizing PHP sessions extensively for authenticated users. For the client side within a mobile application and using Jquery ajax, I am striving to esta ...

phpjavascriptjqueryajaxsession

How to iterate through a Vue data object using forEach loop

I am currently working with a variable in my data: data: function () { return { myVariable: false, } } I'm trying to figure out how to access this variable within a looping function, like the example below: anArray.forEach(functi ...

javascriptvue.jsvuejs2

Transferring data from AJAX to PHP class methods

Q. Is it feasible to transfer data from ajax to a specific php class with functions? For instance, verifying a username on the registration form to check if the user already exists. This form is straightforward and will gather a username input along with ...

javascriptphpjqueryhtmlajax

Using $nin alongside $and in Mongoose

Implementing a filter for an admin user using mongoose operations. The user should be able to view all saved files except for those that are classified as draft files. However, the admin user should still have access to their own saved draft files. Code ...

javascriptnode.jsmongodbmongoose

What's the best way to display a bootstrap modal window popup without redirecting to a new page?

I am having trouble implementing a modal window that will display validation errors to the user when they submit a form. Currently, the window is opening as a new view instead of overlapping the existing form's view. How can I adjust my code so that t ...

javascriptc#ajaxasp.net-mvcasp.net-core

Disabling dates in Fullcalendar with AJAX for Machines and Users

Our software utilizes multiple jQuery fullcalendars on a single page for machine scheduling purposes. Each calendar triggers an AJAX call when a specific input related to the workload changes. The AJAX script is responsible for calculating disabled dates o ...

phpjqueryajaxfullcalendarscheduling

How can you ensure that the right data types are sent through ajax requests?

My goal is to ensure the server receives data in the correct data type when using ajax. For example, I want boolean values to be received as actual booleans, integers as integers (not strings), and so on. I attempted a solution where I sent the data as JS ...

phpjqueryajax

Trigger oncopy on the body excluding specific class

Is there a way to execute a function on document.body.oncopy but exclude a certain class (defined for div elements) from this function call? I want to avoid calling the function on specific classes, is there a method to achieve this? ...

javascript

Merge the variables extracted from an array of objects

I need to extract specific data from an array of objects and perform a calculation. For example, the provided data is as follows: const item = [{ "act": "Q", "line": 1, &quo ...

javascriptreactjstypescriptreact-native

Is there a way to retrieve the final elements from a deeply nested array?

I've been struggling to extract the last item from a nested array of objects. I've tried using methods like flatMap, flat, filter, and splice, but so far haven't had any luck getting the desired array. const array = [ [ { total_c ...

javascriptarraysobjectnested

Is there a way to align the mat card title and subtitle on a single line?

My code is utilizing Angular material and here is the HTML snippet: <mat-card> <mat-card-header *ngFor="let club of result[0]"> <mat-card-title>{{club.clubName}}</mat-card-title> <mat-card-subtitle>Clu ...

htmlcssangularangular-material

What is the process for submitting a post request with custom fields to the Wordpress rest api?

Currently, I am attempting to make a post request to /wp-json/wp/v2/posts while also including custom fields. However, it seems that although the request field is successfully being sent, the custom fields are not updating with the data I am trying to send ...

javascriptphpajaxxmlhttprequestwordpress-rest-api

Utilizing the identical modal for Add/Edit functionality within AngularJS

Recently, I started working with AngularJS and I am in the process of creating a simple project that involves creating, reading, updating, and deleting countries. The code is functioning correctly overall. However, I have encountered an issue regarding th ...

javascripthtmlangularjs

Having trouble assigning the current page in NextJS navigation

I have a unique setup for my navigation system in my NextJS project: const menu = [ { name: 'Home', href: '/home', icon: HomeIcon, current: true }, { name: 'About', href: '/about', icon: InfoIcon, current: fa ...

javascriptreactjsnext.jsjsx

Finding the distance between two coordinates using Mapbox is easy once you understand how to utilize

Currently, I am in the process of learning how to utilize the Mapbox API within my node application. One of my objectives is to execute calculations on the backend, particularly obtaining the distance between two sets of coordinates. I'm struggling w ...

javascriptnode.jsmapbox

Arrange the <form:radiobuttons> in a vertical position

I'm currently utilizing Spring MVC's <form:radiobuttons> to showcase radio buttons: <form:radiobuttons path="selection" items="${arraySelection}" /> The issue I am facing is that it is displaying the radio buttons in a horizontal la ...

htmlcssjspspring-mvc

The CSS header remains the same size regardless of the size of the dynamic table

Is there a way to set the header in an XHTML page to be as wide as the page itself? I used width:100%, but the issue is that I have a dynamic table and when it grows bigger, the header doesn't expand. How can I solve this problem? #header{ top: 0 ...

cssxhtml

Using specific sections of JSON data to display in an alert message (Vanilla JavaScript)

I am seeking a bookmarklet that, upon clicking, will access JSON data and retrieve the "temp" information to display in an alert indicating the weather with just one click. Is there a method to achieve this or do I need to utilize a different API? Here&ap ...

javascriptjson

Placing a hyperlink within template strings

Currently, I am working on implementing a stylish email template for when a user registers with their email. To achieve this, I am utilizing Express and Node Mailer. Initially, my code appeared as follows: "Hello, " + user.username + ",&bs ...

javascriptexpressnodemailertemplate-literals

Troubles with Sizing in Twitter Bootstrap Modal

One issue I have encountered with my application is the varying widths of modals. Setting the width inline works well, but when the window is compressed it can cause part of the modal to be off screen, rendering it useless at smaller resolutions such as th ...

csstwitter-bootstrapmodal-dialog