Timing of JQuery FadeOut is incorrect

Here is some code I am working with:

$(document).ready(function () {

$("#full-btns").children().delay(4000).fadeOut("slow");

$('#full-btns').hover(function() {
      $('#full-btns').children().stop().animate({opacity:'100'});
      $('#full-btns').children().show();

}, function() {
        $("#full-btns").children().fadeOut("slow");

});

Upon page load, the #full-btns section is displayed for 4000 milliseconds before fading out. The issue arises when a user hovers over the #full-btns element while it is still visible, triggering the fade-out effect due to 

$("#full-btns").children().fadeOut("slow");
being called on hover. My goal is to keep #full-btns always visible upon hovering.

If you visit the page and hover over the red div as it fades out, you'll see the problem. While hovering over the red div, it should remain visible and not fade out.

Update: http://jsfiddle.net/gazedge/nhBBc/ (now includes solution)

javascriptjquerycssfadeout

Answer №1

To create a smooth transition effect, you can utilize the setInterval and clearInterval functions in JavaScript.

$('#full-btns').hover(function() {

      clearInterval(refreshIntervalId);        
      $('#full-btns').children().stop().animate({opacity:'100'});
      $('#full-btns').children().show();

}, function() { 
        $("#full-btns").children().fadeOut("slow");            
});

var refreshIntervalId = setInterval(function() {
     $("#full-btns").children().fadeOut("slow");
}, 4000);

​

Answer №2

If I understand the question correctly - couldn't you simply add return false; at the end of your hover functions to stop event bubbling?


Answer №3

To ensure a smooth transition when hovering, it is important to clear all animations beforehand.

$("#full-btns").children().delay(4000).fadeOut("slow");

    $('#full-btns').hover(function() {
        $('#full-btns').children().stop(true, true);  // Stop the fade-out animation
          $('#full-btns').children().stop().animate({opacity:'100'});
          $('#full-btns').children().show();

    }, function() {
        console.log('fadeOout called');
            $("#full-btns").children().fadeOut("slow"); 


    });​

http://jsfiddle.net/nhBBc/5/

Note: The initial fading out of the div when hovered is not caused by $("#full-btns").children().fadeOut("slow");, but rather the completion of an earlier applied animation [ your 1st line ].

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

Troubleshooting issue with Highcharts 3D rendering after using setState()

When working on implementing a 3d pie chart in React using react highchart, I encountered an issue. Whenever I utilize this.setState() inside the lifecycle method componentDidMount(), the 3d chart shifts from its original position to the right diagonally. ...

javascriptreactjshighcharts

Tips for invoking the same directive twice with varying HTML content within the directive

Currently, I am working on a project that involves utilizing AngularJS material. Within this project, I am encountering an issue when calling a directive (<sdiv-panel></sdiv-panel>) twice within the DOM. The problem arises when I make modificat ...

javascriptangularjsangularjs-directive

Bug encountered in the Twitter Bootstrap accordion component

I've been struggling to pinpoint my error for the past few hours. I'm using Bootstrap accordion along with a handlebars template engine, and overall it's functioning correctly with the values from my database. The issue arises when initiall ...

jquerytwitter-bootstraphandlebars.jsbootstrap-accordion

Adjust the size of points positioned absolutely on an image map

Are you struggling to position POIs on a picture map correctly? Check out this link for more information: Even after trying CSS scale and re-positioning in media queries, getting the points in the right place seems impossible. What do you think? Can this ...

cssmedia-queriesscale

Utilize jQuery to send and load double values efficiently

When attempting to load the initial .load, I am able to pass 1 variable without any issues. I receive this variable from a _GET method, store it in a data-id button attribute, and pass it back to another .load. In the second file, I once again receive the ...

javascriptphphtmljquery

Enable vertical scrolling on a container of undetermined height

Can a vertical scroll be implemented on a container with an unknown height using flexbox? The use of max-height is not feasible, as it would limit the height to a specific number that may not work for all screen sizes. Here is a basic example of what is ...

htmlcssflexbox

Reviewing user input for any inappropriate characters using jQuery's functionality

When a username is inputted into the input box, I want to make sure that only valid characters are accepted. The following code shows what I have so far; but what should I replace "SOMETHING" with in the regular expression? var numbers = new RegExp( ...

javascriptjqueryhtml

JavaScript string constant remains unterminated

When I pass a value from the database to this function, I encounter a JavaScript issue. Here is the code snippet: showrootcausedetails('showrootcause',true,'<%# eval("Root Cause Analysis").ToString() %>') I understand that I nee ...

c#javascriptasp.net

Creating a Node server exclusively for handling POST requests is a straightforward process

I'm looking to set up a Node server that specifically handles POST requests. The goal is to take the data from the request body and use it to make a system call. However, my current setup only includes: var express = require('express'); var ...

javascriptnode.jsexpress

Why is there a dot displaying in my countdown when the hours are zero? Also, why does my minute not show as 00 when it passes 59?

There is an issue with the minutes here. https://i.sstatic.net/M8pYB.png Also, there seems to be a problem with the hour dot: https://i.sstatic.net/55SFU.png const [time, setTime] = useState(60 * 60) const hour = time / 3600 let minutes = Math.floor(time ...

javascriptreactjs

Loop through unique IDs using AngularJS ng-repeat

I am just starting to delve into AngukarJS and ionic framework, embarking on the journey of creating an app with a structured tree layout as follows: Home Tab (list of books) (templates/allbooks.html) > unique book (book description and chapters) (tem ...

javascriptangularjsionic-framework

Switch from scrolling the entire page to scrolling within a single div

Whenever I click on an element on my webpage, a modal window with a fixed position appears. The issue I am facing is that when I scroll using the mouse or touch gestures on my phone or tablet, the entire page scrolls instead of just the content within the ...

jqueryhtmlcssscroll

What are the different ways to utilize the "%" symbol in CSS for adjusting the size of elements?

I have attempted multiple solutions, however, the percentage symbol is the only thing that is not working. I am unsure of the reason for this issue. p{ width:100%; } ...

htmlcssbootstrap-4

Is it possible to conceal the contents of a details tag without using a summary tag?

I'm looking for a way to hide the details tag without the summary. In my code, the summary is only visible when a condition [isvisible == false] is met. However, even when the summary is not visible, the details keyword is still shown and I want to hi ...

javascripthtmlcssvue.jscss-selectors

Mark the term on the backspace key and remove it after pressing the second backspace button

<html> <body> <div id="textareaId" contenteditable="true"> Hello there </div> <button onclick=selectText(0,4)>Click to select</button> <button onclick=deleteSelectedText()& ...

javascripthtmljquerycss

Encountering an error while attempting to add class-constructed objects to an array list in React/NextJs: "Unable to add property 0, as the object is

This function contains the code required to generate rows for display in a Material Ui table. class User { constructor(id, name, email, measured, offset, paidAmount, status, home, misc, plane, transport, partner, isCoupon) { thi ...

javascriptreactjsarraysclassnext.js

Looking to troubleshoot a white background issue while attempting to create a transparent navbar

I am trying to create a full-page landing with a transparent navbar using bootstrap4. My goal is to have a sticky navbar that remains at the top as the user scrolls down the page. When I apply the class 'fixed-top', the navbar stays at the top b ...

htmlcssbootstrap-4navbar

Manipulating the size of one div automatically adjusts the size of the other, as they are

I have encountered an issue while trying to manage two resizable divs. I am looking for a solution where changing the size of one div will automatically adjust the size of the other div along the grid, and vice versa. Currently, I am only able to achieve ...

htmlcss

The react-leaflet-heatmap-layer-v3 source directory could not be located

Upon attempting to utilize the npm package react-leaflet-heatmap-layer-v3 in my React TypeScript application, I successfully installed it and ran yarn start. However, I encountered the following warning messages: WARNING in ./node_modules/react-leaflet-hea ...

javascriptreactjsnpmleafletreact-leaflet-v4

The concept of transparency and visual representation

Is there a way to prevent the opacity of the parent div from affecting the opacity of the img? <div class="parent_div" style="opacity:0.2"> <p>Some text</p> <img class="gif" style="opacity: 1;" src="ht ...

css