Every time I hover, my jQuery code keeps repeating the hover effect

I am currently facing an issue that has me stumped on finding a solution.

The problem arises when I hover over the .div multiple times, the animation just doesn't stop and keeps running continuously.

What I aim for is to have the .hidden element fade in or out only once, regardless of how many times you hover over the .div.

Here is my existing code:

<div class="container-of-some-sort">

  <div class="div">
    <p class="nothidden">title</p>
    <p class="hidden">hey would you show me</p>
  </div>

  <div class="div">
    <p class="nothidden">title</p>
    <p class="hidden">hey would you show me</p>
  </div>

</div>

and the JavaScript:

$(function() {
   $('.div').hover(function() {
   $(this).find(".hidden").fadeIn(1000);
   }, function() { 
   $(this).find(".hidden").fadeOut(500);
   });
});

Can anyone suggest a way to achieve this?

For demonstration purposes, I have created a JSFiddle showcasing the issue.

javascriptjqueryhtmlcss

Answer №1

Utilize the .stop(clearQueue,jumpToEnd) method with the parameters clearQueue and jumpToEnd set to true.

ClearQueue will eliminate any queued animations, while

JumpToEnd ensures immediate completion of the current animation.

By default, these parameters are both set to true.

$(function() {
  $('.div').hover(function() {
    $(this).find(".hidden").stop(true, true).fadeIn(500);
  }, function() {
    $(this).find(".hidden").stop(true, true).fadeOut(500);
  });
});
p.hidden {
  display: none;
}

.div {
  display: block;
  background: green;
  width: 300px;
  height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-of-some-sort">

  <div class="div">
    <p class="nothidden">title</p>
    <p class="hidden">hey would you show me</p>
  </div>

  <div class="div">
    <p class="nothidden">title</p>
    <p class="hidden">hey would you show me</p>
  </div>

</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

Angular-oauth2-oidc does not successfully retrieve the access token when using OAuth2 and SSO

Here's an issue I'm facing: I've been attempting to integrate SSO and OAuth2 flow using angular-oauth2-oidc. When testing with POSTMAN and ThunderClient in VS Code, I managed to receive the correct response (the access_token). However, I am ...

javascriptangularoauth-2.0single-sign-onaccess-token

Ensure that the input box expands to occupy the entire HTML page

After reviewing numerous pages and questions related to this topic, I have located the correct solution but am struggling to implement it. My goal is to achieve a similar outcome to the second question, but I'm having difficulty figuring out how to do ...

javascripthtmlcss

What are the steps to create a CSS 'shell' design?

How can I create an image displayed as a circle with border-radius:50%, along with some text on the same line that has a set width and background color? I want to achieve this without hard coding values. What is the best approach to do this? Check out the ...

htmlcsscss-shapes

How can I efficiently map an array based on multiple other arrays in JavaScript/TypeScript using ES6(7) without nested loops?

I am dealing with 2 arrays: const history = [ { type: 'change', old: 1, new: 2 }, { type: 'change', old: 3, new: 4 }, ]; const contents = [ { id: 1, info: 'infor1' }, { id: 2, info: 'infor2' }, { id: ...

javascripttypescriptecmascript-2016

How to make an HTTPS REST API request in Node.js with JSON body payload

Currently, I am attempting to make a secure HTTPS REST request in Node.js by utilizing the following code: var querystring = require('querystring'); var https = require('https'); var postData = { 'Value1' : 'abc1&ap ...

javascriptjsonnode.jshttpsrestful-url

Halt the execution of a function upon clicking a div element

I'm currently working on a function that needs to be stopped when a div with the class "ego" is clicked. This function toggles the visibility of the header based on the scroll position and should only run by default. Below is the code snippet: $("#e ...

javascriptjqueryhtmlcss

Interacting with JQuery UI Button causes it to shift position on mouseover

In my table, there are two large cells. The left cell contains two drop-downs and a JQuery UI button that is causing trouble, while the right cell displays a list generated from an AJAX database query. As the list grows longer, the button gradually moves u ...

jqueryhtmlcssajax

Incorporate measurement markers into the graphic (ESRI JavaScript)

Is there a way to add a scale to a single graphic in a graphics layer? I currently have all the graphics shown in the same scale, but I need each graphic to have a different scale. I added the graphics using map.graphics.add() and SimpleSymbol. Any sugge ...

javascriptesriesri-javascript-api

I currently have two responsive menus and I'm trying to figure out how to modify the javascript so that when one menu is opened, the other

I am facing an issue with my responsive menus on a webpage, similar to the example provided in the jsfiddle link below. Currently, when one menu is open and I click on another, both remain open. How can I modify the JavaScript code so that when one menu op ...

javascriptjquerycssresponsive-design

The Alert Component fails to display when the same Error is triggered for the second time

In the midst of developing a Website using Nuxt.js (Vue.js), I've encountered an issue with my custom Alert Component. I designed a contact form on the site to trigger a specialized notification when users input incorrect data or omit required fields ...

javascripthtmlcssvue.jsnuxt.js

Should the index.js file in Next.js serve as the homepage or solely as the initial starting point?

Should I integrate my homepage directly into the index.js file, or create a separate "home-page.js" file in the pages directory? Is index.js just for initializing the application, or can it serve as a standalone page? Alternatively, should I have index.j ...

javascriptreactjsnext.js

Tips for eliminating the border radius on select box elements within Bootstrap

I am currently using bootstrap v3.3.1 from the standard directory, and I am facing difficulty in removing the border radius from the select box components specifically in Google Chrome. This particular inquiry is unique because: Despite attempting to mo ...

htmlcsstwitter-bootstrap

The successful execution of one promise determines the outcome of the $q.all promise

I am currently dealing with a situation where I have three nested promises that I need to refactor into a single $q.all call. The current structure of the code looks like this: ds.saveData(data).then(function (result1){ someOtherVar = result1.Id; ...

javascriptangularjs

What is the correct way to invoke a function from the reducer/actions within this specific scenario?

There seems to be an issue with the action/reducer I am attempting to call. It appears that the function is not being read correctly when called. The problem lies within the deleteWorkout function. I've attempted to use mapDispatchToProps and have al ...

javascriptreduxreact-reduxmaterial-ui

Why is Chrome not enforcing the maximum attribute for input type number in HTML5?

I'm encountering an issue with the following code snippet: <input type="number" max="99" /> While using Google Chrome (and possibly other webkit browsers), it appears that the spinner's up arrow is restricted from going over 99. However, ...

formshtmlgoogle-chrome

Storing individual socket.io data for each client

Is there a proper way to save data on Socket.io per client? I was considering using this approach, but after doing some research, it seems like it may not be the best method: io.on('connection', function(socket) { console.log('socket co ...

javascriptnode.jssocketssocket.io

Using Radio button to access local HTML pages - A step-by-step guide

I am currently working on a project that involves the use of radio buttons and their corresponding options. My goal is to have each radio button selection lead to a specific HTML page being displayed. I've come across solutions involving external URLs ...

javascriptphpjqueryhtml

Turn off integrity verification for local dependencies in package-lock.json

Is there a way to bypass the integrity check for a local dependency in package-lock.json? Within my project repository, I have a core library along with two Angular applications that both rely on this core library as a dependency. The problem arises beca ...

javascriptnode.jsangularnpmnpm-install

Toggle Vue transitions on and off with a boolean parameter

Is there a way to dynamically disable a transition animation in Vue based on a boolean value? Currently, the animation is enabled with the following code: <transition name="fadeUp"> <div v-if="elIsVisible"> <p>Foo Bar</p> ...

javascriptvue.js

How can I store the city name instead of the city id in the database when submitting data from a dependent dropdown select in Ajax PHP?

For the past few days, I have been unable to solve a problem. The issue is as follows: I have a web form with dependent dropdown select boxes where users can choose their city, zip code, and street. However, when the form is submitted, only the city_id ( ...

javascriptphpjquerymysqlajax