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

Instructions on utilizing the signUp() function in Supabase for including extra user details during the registration process

My latest project involves building a Vue.js application with authentication using Supabase. I've been trying to implement the signUp() method from Supabase in order to collect extra user data during the sign-up process. In my code, I added a property ...

javascriptvue.jsauthenticationsupabasesupabase-database

Tips for locking the button in the navigation bar while scrolling

I noticed that when I have 6 fields in my navbar, with 5 of them being links and one as a dropdown, the scrolling of the page causes all fields to remain fixed except for the dropdown field.Check out this image description for reference https://i.stack.im ...

javascriptcsshtmlbootstrap-4

How can "this" be properly utilized in jQuery?

I am attempting to retrieve the title attribute of an element from various elements with the same class, each having different attributes. This is my current approach: HTML <div title="title1" class="pager" onclick="location.href='link.aspx& ...

javascripthtmljqueryjquery-events

Leveraging RXJS for efficient data retrieval in nodejs

When dealing with sending a bulk of data and moving on to the next one upon completion, it can be quite challenging. Take for instance this function: async function test() { await sample.sampleStructure() await sample.sampleDataAdd() await sample.sa ...

javascriptnode.jsrxjsrxjs6rxjs-observables

What is the correct way to include variables {{var}} within a {{#each}} loop?

I'm curious if there's a way to include double-stashed {{var}} embeds in my HTML code. Here is an example: I have the .hbs code below: {{#each tables.books.data}} <tr> <td>...</td> <td>...</td> </tr> {{/eac ...

jqueryhtmlhandlebars.js

Exchange information between two selected items

Below is a simplified version of the current code that I am working with: https://jsfiddle.net/2zauty83/8/ Javascript function checkboxlimit(checkgroup) { var checkgroup = checkgroup for (var i = 0; i < checkgroup.length; i++) { checkgroup[i] ...

javascriptphphtml

Send a collection of list items from the client to a Spring MVC controller

Is it possible to send a dynamically changing list of values to a Spring controller in a submission? I came across a solution on this page, but it only seems to work with input fields since you can't assign a name attribute to the li tag. <ul id=" ...

javahtmlspring-mvc

Utilizing Angular to efficiently download and showcase PDF files

Presently utilizing https://github.com/stranger82/angular-utf8-base64 as well as https://github.com/eligrey/FileSaver.js/ for the purpose of decoding a base64 encoded PDF file that I am fetching from a rest API. It successfully decodes and downloads, ...

javascriptangularjspdf

Challenges with Aligning Panels in Column 6

My initial encounter with bootstrap was interesting. I attempted to have two panels placed side by side using the col-lg-6 class. The left panel was meant to be a link to an article, along with an image, while the right panel would serve as a signup/login ...

htmlcssbootstrap-4

Guide to inserting text into an html element upon clicking an ASP:Button

In my code, there is a DIV that holds some text. Accompanying the text is an asp:Button. When this button is clicked, I aim to access and save this particular text. Nonetheless, it seems that once the button is clicked, the content of the DIV resets - lik ...

c#javascriptjqueryasp.nethtml

Encountering a problem when attempting to call jqgrid via an Ajax request in MVC3: receiving error code 800201

An issue is occurring with the following code, displaying an error message "Could not complete the operation due to error 80020101" in the 'jquery-1.8.3.js' file: <script language="javascript" type="text/javascript"> $(document).read ...

jqueryasp.net-mvc-3

Using $.ajax to make asynchronous requests in ASP.NET Web Forms

I am currently working on incorporating the $.ajax method into my sample program. The structure of the page is as follows: <form id="form1" runat="server"> <div> Country: <asp:TextBox ID="txtCountry" runat="s ...

c#jqueryasp.netajaxasp.net-ajax

A conflict with the Ajax file is causing an automatic logout

In my Rails application, there is a page with a table that uses partial AJAX to increase the capacity attribute in a time entity. You can view the visual representation of the table here. By clicking the plus/minus button, the capacity attribute increases ...

javascriptjqueryajaxruby-on-rails-3csrf

Tips for adjusting the property of an object that has been added to an array?

I have created an object. { "heading": [{ "sections": [] }] } var obj = jQuery.parseJSON('{"header":[{"items":[]}]}'); Then I add elements to the sections var align = jQuery.parseJSON('{"align":""}'); obj["he ...

javascriptjqueryarraysjson

Antialiasing in Three.js is failing to work properly on Google Chrome

When using Chrome v31, I've noticed that antialiasing doesn't seem to be working properly. There are no errors in either browser. Here is the possibly relevant code: var renderer = new THREE.WebGLRenderer( { antialias: true } ); The rendering ...

javascriptgoogle-chromethree.jswebgl

Issue encountered when assigning a CSS class to Angular component

My module contains a table structure with specific components. Here is the source code for table.component.html: <table border=1> <theader></theader> </table> The source code for theheader.component.html is as follows: <thea ...

htmlcssangular

Troubleshooting issues with sending email with attachments in PHP and HTML

I've been having trouble sending an email with an attachment file; it just doesn't seem to work and I can't seem to receive any files. Although my HTML syntax appears correct, as I haven't received any bounce-back emails, the issue per ...

phphtmlemail

Samsung Galaxy S7 can interpret alphabetical parameters as numbers in a link sent via SMS

When trying to open a text message with a new message on my website using a link, I encountered an issue specifically with the Galaxy S7. The following code works on most Android phones: sms:5555555555?body=JOIN However, on the Galaxy S7, the "?body=JOIN ...

javascriptandroidhtmlsmssamsung-galaxy

Error encountered during the prerendering process on Vercel's Next.js build

While trying to compile my website on Vercel, I encountered a pre-rendering error during export. Does anyone know why this is happening and can provide assistance? Here is the link to my GitHub repository where all the code is stored: https://github.com/M ...

javascriptreactjsnext.jsvercel

The issue at hand is that the headers cannot be redefined once they have already been sent

Hello, I have tried numerous solutions but have not been able to resolve the "Can't set headers after they are sent" error in the following simple code. I have spent several days working on this and would greatly appreciate any input you may have. ap ...

javascriptnode.jsamazon-web-servicesexpressaws-sdk