Using jQuery to delay hiding for 2 seconds

Hey there! I'm facing an issue with my code. The function is supposed to make #aboutPopOut slide to the left, and then after a 2-second delay, fade out the fadescreen by hiding it. The sliding part works fine, but the waiting and hiding do not seem to be functioning as expected. Check out the function below:

function aboutHide() {
    $("#aboutPopOut").animate({ left: "-60%" }, 500);
    setTimeout(function() {
        $("#fadeScreen").wait(2).hide();
    }, 500);
};

I would really appreciate any help in solving this problem. Thank you in advance for your assistance.

javascriptjqueryhtmlcssweb

Answer №1

If you want to introduce a delay in your animation, consider using the .delay method. Don't forget to include a number when using .hide to ensure it functions as an animation method; otherwise, .delay won't have any impact.

 $("#fadeScreen").delay(2000).hide(0);

Answer №2

give this a shot

function hideAboutSection() {
    $("#aboutPopOut").animate({ left: "-60%" }, 500);
    setTimeout(function() {
        $("#fadeScreen").delay(2000).hide();
    }, 500);
};

Answer №3

Revise the content below: 

function hideInfo() {
$("#infoBox").animate({ left: "-60%" }, 500);
setTimeout(function() {
$("#overlay").delay(2000).hide();
}, 500);
};

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

Implementing CSS loading in Vue 3's shadow DOM for nested components

I'm currently working on building an embeddable widget using a custom element with Vue. In order to achieve this, I've created a file called Widget.ce.vue and enabled style loading in the component's shadow root. However, I've run into ...

cssvue.jsvuejs3custom-elementvue3-sfc-loader

Switch up text using jQuery on css-tricks.com

I am having trouble with the code I found on a page about toggling text using jQuery from this link. Could someone please explain to me the significance of ':visible'? Thank you. Here is the fiddle link, and below is the code that I copied. Vi ...

jqueryhtmlcss

Exploring the functionality of the onblur HTML attribute in conjunction with JavaScript's ability to trigger a

How do the HTML attribute onblur and jQuery event .trigger("blur") interact? Will both events be executed, with JavaScript this.trigger("blur") triggering first before the HTML attribute onblur, or will only one event fire? I am using ...

javascripthtmljqueryjquery-ui

What is the best way to incorporate one Div within another Div using JavaScript?

I have a single main div with an id, and I am looking to insert 4 additional child divs inside it. Each of these child divs will then contain 5 more divs each. The code snippet that I currently have is as follows: $( document ).ready(function() { for( ...

javascriptjqueryhtmlfunction

Utilizing webpack 4's JSON tree-shaking functionality for keys that include the hyphen character

I need assistance with utilizing webpack 4's JSON tree-shaking feature as I am encountering a hurdle. Here is an example of some functional code: import { accessibility_16 } from '@collab-ui/icons/data/iconsData.json'; console.log("access ...

javascriptjsonwebpack

Creating a versatile JavaScript library that is compatible with various platforms such as browsers, NodeJS, and single page applications like React

My question is: Is it possible to convert a basic file into a versatile library that can be utilized with Browsers (via script tag), Node JS, and Single Page Applications using a single codebase? In the past, I have primarily used existing libraries witho ...

javascriptnode.jsnpmsingle-page-application

Strange duplication of post request in Sitefinity

I'm dealing with a peculiar issue. Imagine having two identical forms or widgets on the same webpage. Here is the code for the form: <form> <input class="form-group" type="text" title="FirstName" name="FirstName" id="FirstName" /><br ...

c#jqueryajaxasp.net-mvcsitefinity

Tips for moving an element to the end of an array

Patients' data is stored in the MongoDB database, and all patients are mapped through on the frontend to display a list. An additional boolean value indicates whether a patient is archived or not. If a patient is archived, it should be displayed at th ...

javascriptnode.jsreactjs

Having a pair of submit buttons within a single form

I need assistance regarding a form with five file input controls and other various controls. Additionally, there are two submit buttons included within the form structure. Utilizing the JQuery Validation plugin for validating form inputs has been an essen ...

phpjquerysubmitvalidation

A guide on seamlessly transitioning from a mobile website to the corresponding native app

I am currently working on a mobile website project. This website is built using basic HTML and is accessed through a URL on a web browser, not as a native app or through PhoneGap. The client has requested links to their Facebook, Pinterest, YouTube, Twitt ...

javascriptandroidhtmliosfacebook

Loading select list options asynchronously

I am working on extracting data related to Municipality names, ZipCodes, and more from a public service provider called DAWA using AJAX. Initially, I faced an issue with retrieving the data until I made the transfer asynchronous; hence, the function ajaxGe ...

javascriptajaxasynchronoushtml-select

When utilizing ajax in an MVC framework, an error was encountered due to the conversion of a datetime2 data type to a datetime data type resulting in an out-of

When trying to send data from ajax to the controller, I am encountering a title error. Oddly enough, when checking the datetime, it appears to be correct and displaying the current time accurately. Despite this, the same error persists. I have noticed tha ...

c#jqueryajaxasp.net-mvcdatetime

insert a new record into the database using AJAX

I'm currently working on a script that adds text/rows to the database using AJAX. In my script, I have included a checkbox with the id "main" and I want its value to be sent to the database as well. However, regardless of whether the checkbox is che ...

phpjqueryajax

Exploring the process of querying two tables simultaneously in MySQL using PHP

I currently have a search box in my PHP file that only searches from the "countries" table. However, I also have another table called "continent" and I would like the search box to retrieve results from both the "countries" and "continent" tables. Here is ...

javascriptphphtmlmysql

Discovering details regarding cookies established by an external domain

Is it possible to retrieve the host address of the domain that created a cookie on my webpage? Here is the scenario I am facing: I am on "domain A" and have a script linked from "domain B". A method on "domain B" sets a cookie on my "domain A". How can ...

javascriptcookies

I am experiencing an issue with the checkbox in my React app where the state is not updating after it has been

I am currently building a todo app using React, but I'm encountering an issue where nothing happens when I click the checkbox. I've provided my code below: App.js import './App.css'; import React from 'react' import TodoItem ...

javascriptreactjs

Refreshing the Document Object Model when dragging and dropping items using jQuery

Within my table, I am working with two unique columns. The first column is labeled "pick" and the second is labeled "drop". In the first column, I have several items that I can drag using jQuery UI draggable/droppable into the second column. My goal is to ...

jqueryjquery-uidrag-and-drop

Start by retrieving information and then sending properties to a different component

I have been struggling with this issue for more than a week now. Despite thorough reading of the Next.js documentation and extensive online research, I still can't figure out what's wrong. It seems like I must be overlooking something important, ...

javascriptreactjse-commercenext.js

Inquiries about utilizing setTimeout with backbone.js and effectively managing timeouts

One of the questions I have is related to clearing timeouts using clearTimeout(content.idTimeout) for a specific idTiemout. But how can I clear all timeouts at once? Here is the model I am working with: var ContentModel = Backbone.Model.extend({ URL: "htt ...

javascriptjquerybackbone.js

What is the method to initialize a Stripe promise without using a React component?

I have encountered an issue while implementing a Stripe promise in my React app. The documentation suggests loading the promise outside of the component to prevent unnecessary recreations of the `Stripe` object: import {Elements} from '@stripe/react-s ...

javascriptreactjsreduxstripe-payments