Animate the page transition with jQuery once the CSS animation finishes

My screen is split in two halves, and when you click on a side, they are supposed to slide open like curtains and then fade into another page. I have successfully created the animation using CSS and jQuery to add the appropriate class on the click event.

However, my issue lies in getting the new page to fade in after the CSS animation has completed.

This is the jQuery code I am currently using:

jQuery(document).ready(function($) {
    $('.container').fadeIn();

    /*-- Splash Screen Settings --*/
    var btn = $('.lang-box a');

    btn.click(function (e) {
        e.preventDefault();
        
        if($(this).parent().hasClass('lang-eng')) {
            $('.side-left').addClass('slide-left');
            $('.side-right').addClass('slide-right');
        }

        if($(this).parent().hasClass('lang-afr')) {
            $('.side-left').addClass('slide-left');
            $('.side-right').addClass('slide-right');
        }
    });
});

Answer №1

When utilizing the FadeIn function, remember to take advantage of its callback feature like this:

http://api.jquery.com/fadein/

$(".content").fadeIn({ done: function() { // Bring additional content into view } });

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

Guide on retrieving a nested JSON array to extract a comprehensive list of values from every parameter within every object

A JSON file with various data points is available: { "success": true, "dataPoints": [{ "count_id": 4, "avg_temperature": 2817, "startTime": "00:00:00", "endTime": "00:19:59.999" }, ... I am trying to extract all the values of & ...

Tips for accessing jQuery UI tab elements and adjusting visibility for specific panels

How can I retrieve the panel numbers of jQuery UI tabs and adjust their visibility using CSS? I am looking to identify the panel numbers of each tab and control the visibility of certain tabs. <div id="tabs"> <ul> <li><a href="#"> ...

What is the process for transferring information from a Ruby controller to an application JavaScript using AJAX?

When clicking a button, an AJAX call is made in my application.js file. It sends 3 data points to the events_controller#check action: //application.js $(document).on('click', "#check-button", function(){ ... $.ajax({ ...

Issue with floating the navbar to the right in Bootstrap 4

I am trying to reposition the navbar (without logo) to the right side using code. To achieve this, I included the class "float-right" like so <div class="collapse navbar-collapse float-right" id="navbarSupportedContent">. However, this modification ...

How can I ensure that Chakra UI MenuList items are always visible on the screen?

Currently, I am utilizing Chakra UI to design a menu and here is what I have so far: <Menu> <MenuButton>hover over this</MenuButton> <MenuList> <Flex>To show/hide this</Flex> </MenuList> </ ...

Splitting elements into two categories with Angular.JS: Comparing ng-hide and filter

My task is to take an object with data and display it in two separate lists. The structure of the object is as follows: var data = [ {name: "Something 1", active: 1, datetime: "goes", author: "here"}, {name: "Something 2", active: 0, datetime: "goes ...

Error occurred while parsing the HTTP GET response (possible empty String?) - however, the body contains data

I have been working on a script in Javascript that communicates with a local Java Server through HTTP Requests. The structure of my requests is as follows: var req = $.ajax({ type : "GET", dataType : "json", url : "http ...

Executing a single command using Yargs triggers the execution of multiple other commands simultaneously

I've been diving into learning nodejs and yargs, and I decided to apply my knowledge by creating a command-line based note-taking app. The structure of my project involves two files: app.js and utils.js. When I run app.js, it imports the functions fr ...

The issue of an HTML button positioned on top of an image not remaining fixed when the browser window is resized

After mastering the art of placing an html form element on top of an image, I am now facing the challenge of making sure that the button remains intact even when I resize the window. For a reference, please visit: Note: Despite its simplicity, I acknowle ...

Failure of PrimeNG Autocomplete dropdown to adjust position

My experience with the PrimeNG Autocomplete plugin resulted in some conflicts. When using this style, the autocomplete drop-downs are positioned downward. Image description goes here https://i.sstatic.net/VZmAk.png If anyone knows how to resolve this is ...

Issue with Context Menu Not Triggering on Dynamically Added Elements in JQuery

Check out the JSFiddle Demo Within my email sidebar, I implemented a custom right-click feature that allows users to add new sub-folders. The code snippet below demonstrates how this functionality works: if ($(this).hasClass('NewSubFolder')) { ...

What was the reason for node js not functioning properly on identical paths?

When the search route is placed at the top, everything works fine. However, when it is placed at the end, the route that takes ID as a parameter keeps getting called repeatedly in Node. Why does this happen and how can it be resolved? router.get('/se ...

When utilizing a React styled component, it functions smoothly during development but triggers a build error when in production

Recently, I encountered a strange issue with my code. I have a styled component div that wraps around another component in this manner: <ContentWidget> <BookDay /> </ContentWidget> (The Bookday component returns an empty div so there ...

jQuery is not recognizing the checked state of a checkbox when it is modified dynamically

$("#submit_load").click(function() { var profilename =$("#search_profiles option:selected").attr("value"); var data='profilename='+profilename+'&user_id=' + <?=$user_id;?>; alert(data); $.ajax({ //this is ...

Block entry to HTML files unless the user has logged in utilizing PHP sessions

I have been working on implementing a verification process to check if a user is logged in when accessing a specific HTML file. When a user tries to access something.html without being logged in, I would like to redirect them to index.php and restrict acc ...

Examining a React component through unit testing using Jest and Enzyme

I am currently conducting unit tests on a React component. One component is importing another and utilizing its props. Below are the JSX files: class First extends React.PureComponent { render() { const { name, isSelected, onClick } = this.pro ...

When you drag down on mobile Safari on an iPad, touch events may cease to fire in HTML5

When I implement event listeners to handle touch events like touchmove and touchstart document.addEventListener("touchstart", function(event){ event.preventDefault(); document.getElementById("fpsCounter").innerHTML = "Touch ...

In order to comply with JSX syntax rules in Gatsby.js, it is necessary to enclose adjacent elements

I want to apologize beforehand for the code quality. Every time I attempt to insert my HTML code into the Gatsby.js project on the index.js page, I encounter this error: ERROR in ./src/components/section3.js Module build failed (from ./node_modules/gatsb ...

How can real-time data be fetched or connected to Firebase v9 in the onSubmit function?

Please provide the code in firebase-v9 to fetch the onSubmit function from firestore: const onSubmit = (formData) => { console.log(formData) db.collection('emails').add({ to: formData.to, subject: formData.subject, message: formData.mess ...

Determine the parent nodes of an item in an array tree

My array represents different groups, structured like so: Company Name IT Finance Global Finance Financial Department Tax and Co. My goal is to select a specific node (such as Financial Department) and create a new array containing that node and it ...