Delay the occurrence of a hover effect until the previous effect has finished executing

As I hover over an element, the desired animation is displayed while hiding other elements on the page.

The challenge I'm encountering is that if I quickly hover over many divs, the animations queue up and hide the divs sequentially. I want only one div to be hidden at a time when hovered on, and once all animations are complete, allow the functionality to work again.

View jsfiddle here. If you hover rapidly over the divs, you'll notice them continuously appearing/disappearing. I'd like more control to only enable the effect to occur again once the animation has completed.

Please refer to the code below for reference:

I attempted to add

if(!$(".wrapper").is(":animated")){....

however, it unfortunately did not solve the issue.

HTML

<div class="box-1">
  <div class="wrapper">
    <div class="background-out label-1 label"></div>
    <div class="background-over label-1 label"></div>
    <div class="background-info">
      <div class="text">Bla bla bla.</div>
    </div>
  </div>
</div>

<div class="box-2">
  <div class="wrapper">
    <div class="background-out label-2 label"></div>
    <div class="background-over label-2 label"></div>
    <div class="background-info">
      <div class="text">Bla bla bla</div>
    </div>
  </div>
</div>

CSS

.box-1 {
  position: absolute;
  top: 40%;
  left: 40%;
}

.box-2 {
  position: absolute;
  top: 10%;
  left: 40%;
}

.wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 0 20px;
}

.background-out,
.background-over {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.background-out,
.background-over,
.background-info {
  transition: opacity 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -moz-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -webkit-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms;
}

.background-info {
  position: absolute;
  left: 100px;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  transform-origin: 0% 50% 0px;
  transform: rotateY(-90deg);
  background-color: #f8f8f8;
}

.background-info .text {
  font-size: 12px;
  letter-spacing: 1px;
  text-align: center;
  width: 80%;
  margin-left: 10%;
  margin-top: 5px;
}

.background-out {
  transition-timing-function: linear;
}

.wrapper:hover .background-out {
  visibility: hidden;
}

.wrapper:hover .background-over,
.wrapper:hover .background-info {
  transform: translate3d(0px, 0px, 0px) rotateY(0deg);
  transition: opacity 1000ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -moz-transform 1000ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -webkit-transform 1000ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms;
  opacity: 1;
}

.background-over {
  background-color: transparent;
  opacity: 0;
  transform-origin: 100% 50% 0px;
  transform: rotateY(-90deg);
}

.label-1 {
  background: yellow;
}

.label-2 {
  background: pink;
  ;
}

.label {
  animation-duration: 1s;
  animation-name: slidein;
}

JS

$('.wrapper').hover(function() {
  $('.wrapper').not(this).fadeOut('slow');
  $('.wrapper .label').not(this).removeClass('label');
}, function() {
  $('.wrapper').not(this).fadeIn('slow');
});

Answer №1

To prevent animations from queuing, make sure to utilize the jQuery .stop() method.

For a working example, visit: https://jsfiddle.net/po34gv6v/11/

$('.wrapper').hover(function() {
  $('.wrapper').not(this).stop().fadeOut('slow');
  $('.wrapper .label').not(this).removeClass('label');
}, function() {
  $('.wrapper').not(this).stop().fadeIn('slow');
});

More information can be found here: https://api.jquery.com/stop/

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

I can't seem to figure out why my container is not centered on the screen, despite setting the margins (left and right) to auto

Hey there, I'm a beginner in programming and currently experimenting with the CSS vertical text slide animator feature. However, when the animation runs smoothly, I noticed that the text appears disproportionate and not properly centered on the screen ...

What is the best way to fill in columns with data, adding one entry per column each time and repeating the process in a loop?

I am looking to display multiple posts on a page within 3 columns: column 1 | column 2 | column 3 | The desired outcome is: column 1 | column 2 | column 3 | post1 post2 post3 post4 post5 post6 ... For instance, the HTML code appe ...

I'm noticing that my style.css changes are only showing up after a hard refresh, but then they revert back to an older version when I refresh normally

Apologies for the lengthy title. Here's the issue: I have a WordPress website with a custom theme and its corresponding child theme. Previously, updating the style.css file of the child theme would show the changes immediately after a website refresh ...

Is there any practical reason to choose tables over CSS for controlling layouts?

As I dive into updating a large amount of code for a web application, I've noticed that tables are heavily used throughout to manage layout. Being relatively new to HTML programming, I find myself questioning the necessity of using tables when CSS co ...

The issue arises when using IE8/9 with $.get and .html() functions, as the retrieved data

Below is a snippet of JavaScript code that I am currently working with: $(".refresh").on("click touch", function () { $.get($("a.suggest-date").attr('href') + '#suggestedDate', null, function (result) { console.log(result); ...

Tips for creating a mobile-friendly Bootstrap carousel that is both scalable and zoomable while maintaining the default slide functionality

I have a website using Bootstrap 4.x carousel. The layout is user-scalable with the following viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, shrink-to-fit=no">. Currently, users can pinch to z ...

The inline $Emit function is not generating the correct random number when using Math.random()

I've been diving into the concept of $emit event in Vue and came across this tutorial: . I tried implementing something similar using Vue2.js, but every time I click the button, it gives me a rounded number instead of a random number like in the guide ...

Mastering the art of utilizing particles.js

Particles.js doesn't seem to be functioning properly for me—I'm struggling to pinpoint the issue. Any guidance or suggestions would be greatly welcomed, as I'm unsure whether it's related to an external dependency... HTML: <div ...

Utilizing @Model attributes within a jQuery post request to the controller

Just starting out with asp.net / mvc3 / jquery and more. I've got a jquery datepicker set up and functioning to post data via ajax: $(document).ready(function () { $('#ImplementationStart').datepicker({ onSelect: function (date) ...

What is the process of querying both a collection and a subcollection in Firebase using AngularFire?

I have a structure in my firebase database that looks like this: /profiles/{uid}/displayName /email /otherAttribues /roles/{roleName}/someAttribute /someOtherAttribute The reason ...

Retrieve information following an Ajax call inside a pre-designed template

Upon rendering a page with data put together by EJS, the goal is to refresh a section (thirdRow) of the page whenever the user submits new data. The refreshed section should display both the newly submitted data and the existing data. Although I have obtai ...

Invoke a function or variable based on a string parameter within a JavaScript/React function dynamically

I am currently exploring ways to dynamically call a function based on a string or reference a variable using a string. For example: import React, {useState} from 'react' const array = [ { text: 'count1', setFunctionName: &apo ...

Combine both typescript and javascript files within a single Angular project

Is it feasible to include both TypeScript and JavaScript files within the same Angular project? I am working on a significant Angular project and considering migrating it to TypeScript without having to rename all files to .ts and address any resulting er ...

Using Vue and vue-multiselect to create interactive options based on the selected language

I'm currently developing a Vue website with multilingual support. The chosen language is stored in a Vuex store and accessed through the computed property lang, like so: lang(){ return this.$store.state.lang } I use this lang property in v-if cond ...

Having Difficulty Configuring Async Request Outcome

I'm struggling to access the outcome of an asynchronous request made to an rss feed. After reading a post on How do I return the response from an asynchronous call?, which recommended using Promises, I tried implementing one. However, even though the ...

When incorporating props into styled components, the outcome often turns out to be unexpectedly

I have implemented styled components to change the text color by passing props. <Button variant = 'colour' type="submit" form="myForm" className="submit-btn"> Submit </Button& ...

Encountering an issue with Spring and AngularJS, as I am receiving an HTTP Status 404 error message

I'm encountering an HTTP Status 404 error within my controller. Server code @RequestMapping(value="/showMsg/", method=RequestMethod.GET,produces= { "application/json" })' public ResponseBody String show(){ HashMap hash = new HashMap(); ...

Triggering Jquery event multiple times

I am using a jQuery datatable that gets populated with data from a database through an AJAX call when a user clicks on a load button. The data is displayed based on the date selected by the user in a datepicker. I have also added an export button to allow ...

What is the best way to retrieve child elements from JSON within an Angular JS controller?

I'm having trouble understanding how to ensure the resource call completes before assigning the data.properties to $scope in my controller. My confusion lies here: The resource call returns the following response: [ { "PreAlertInventory": "5.00 ...

A step-by-step guide on enabling Autoclick for every button on a webpage

I am currently using Jquery and Ajax to carry out an action, my goal is for a code to automatically click on every button once the page has finished loading. Although I attempted to use the following javascript code to achieve this at the end of my page, ...