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

What is the best way to specify attributes such as font size and padding for the mobile version in AMP for email?

I attempted to utilize media queries to create a responsive AMP email, but it seems that this feature is not supported in AMP. However, I discovered that you can define media="(max-width: 599px)" and media="(min-width: 600px)" for </amp-img>, but the ...

htmlmedia-queriesamp-htmlamp-email

The ajax form submit function does not have the capability to automatically post content

On this particular webpage, there is a visible form labeled form A which contains a submit button with a post action. <form name="payFormCcard" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post"> I am looking to cre ...

javascriptphpajaxformshtml-post

Is it possible to use a single function to both set the state and return JSX?

I'm currently grappling with creating a function that, when called, will update the state to an object {item: 'whatever the user types', list: [...list, todo]}. The challenge I'm facing is figuring out how to update the state and return ...

javascripthtmlreactjsreact-hooksuse-state

One requirement for a directive template is that it must contain only a single root element, especially when using the restrict option to E

I am currently managing an older AngularJS application (v1.3.8). Why is the demo application showing me this error? The directive 'handleTable' template must have only one root element. sandbox.html <!DOCTYPE html> <html> <he ...

javascriptangularjs

Substitute "Basic Authentication" with "Form Authentication"

Is there a way in W20 to switch from using "Basic Authentication" to "Form Authentication"? The current documentation mentions only the use of "basicAuth" and does not provide information on implementing form authentication. Our app is built with Angular ...

javascriptjavaangularjsfrontendseedstack

Exploring the concept of sharing variables between files in Node.js and JavaScript

I have a situation where I am working with files that require database access. One of the files contains code like this: ... var dynamo = new AWS.DynamoDB.DocumentClient(); module.exports.getDatabase= function(){ return dynamo; }; ... I'm curiou ...

javascriptnode.js

Ways to assign a default background shade to a webpage with a transparent background

My page has a completely transparent background achieved by using: body { background:none transparent!important; } When I display this page in a transparent iframe on another site, I can see the website's background through the page. However, if ...

htmlcss

Employ the 'this' attribute within _.map

I am facing an issue where I need to call a setState function within a _.map loop in React. However, the loop is losing the reference to 'this' and therefore I cannot use setState as this becomes undefined. cargaDinamica(){ _.map(this.stat ...

javascriptnode.jsreactjsecmascript-6underscore.js

The jQuery target is not able to locate the specified element

Why does this code snippet work in one case: jQuery(this).closest("li").find("p").text(); But when enclosed within a function, it fails to produce the desired result: jQuery.each(words, function(i, v) { jQuery(this).closest("li").find("p").text(); } ...

javascriptjquery

The function applyMiddleware in React Redux is not working correctly

After thoroughly reviewing my code, I couldn't find any flaws, yet I received this error message: Uncaught TypeError: (0 , _reactRedux.applyMiddleware) is not a function import { applyMiddleware, createStore } from 'react-redux' impor ...

javascriptreactjsecmascript-6redux

Enabling a mat-slide-toggle to be automatically set to true using formControl

Is there a way to ensure that the mat-slide-toggle remains true under certain conditions? I am looking for a functionality similar to forcedTrue="someCondition". <mat-slide-toggle formControlName="compression" class="m ...

javascriptangulartypescripttoggleform-control

Tips for operating an Express application with React in production mode

My web application has a specific file structure as shown in the image below. https://i.stack.imgur.com/Etzdb.png I'm facing difficulties running my web app with the React Production Build. The following code snippet in my index.js doesn't seem ...

javascriptnode.jsreactjsexpress

Alignment of card images

Is there a way to keep the images in my cards fixed at the top of the card body? I've tried using bottom: 0 but it's not working as expected. The card body has a fixed height and is fixed to the bottom, which is functioning correctly. However, si ...

htmlcssbootstrap-4

Utilizing multiple AJAX requests to a single PHP script

Despite searching through other topics, I couldn't find a solution to my issue. I have two ajax calls that both target the same page. One is meant to delete language selection and the other is meant to delete education experience. Oddly enough, the l ...

phpjqueryajax

Unable to display image on HTML due to the image src not loading

Hey folks! I'm currently working on a TodoApp using react js, and although I have a basic layout set up, I am encountering an issue while trying to add images to the app. Unfortunately, the images are not loading as expected. Sharing the relevant cod ...

htmlreactjsweb

The retweet option is missing from Twitter Web Intents

I am trying to implement Twitter Web Intents to display modal windows for actions such as "Like" and "Retweet". Following the instructions from https://developer.twitter.com/en/docs/twitter-for-websites/web-intents/overview, my code looks like this: <h ...

htmlwebtwitter

How can I eliminate the scrollbar from appearing on all browsers when visiting my website?

I've encountered an issue while building my portfolio with React.js. I'm having trouble removing the scrollbar. I've attempted using overflow: hidden for the parent element and overflow: scroll for the child div, but it's not producing ...

javascriptcssreactjssass

Utilize dynamic CSS application within an Angular application

In my Angular application, I dynamically load URLs inside an iframe and want to apply custom.css to the loaded URL once it's inside the iframe. I attempted using ng-init with angular-css-injector function in the iframe, but the CSS is not being applie ...

cssangularjsurldynamic

Transmit data from an HTML form to PHP using JSON

I am attempting to utilize JavaScript to send POST data. I have the data in an HTML form: <form name="messageact" action=""> <input name="name" type="text" id="username" size="15" /> <input name="massage" type="text" id="usermsg" si ...

javascriptphpjqueryhtmljson

Unable to display label in form for Angular 2/4 FormControl within a FormGroup

I'm having trouble understanding how to: Use console.log to display a specific value Show a value in a label on an HTML page Display a value in an input text field Below is my TypeScript component with a new FormGroup and FormControls. this.tracke ...

javascriptangularangular-reactive-formsangular-forms