"Utilize jQuery to introduce a delay in the timing of

When I click on the button, a class is added to the container. The content is hidden, and the container flips with a transition before displaying some information. Here is the code I am using:

$('.btn-click').on('click', function() {
  $('.content').toggleClass('hidden');
  $('.card_container').delay('slow').toggleClass('class_active');
  $('.info').toggleClass('display');
});

The styles for the class are as follows:

  transform: rotateY(180deg);
  transition: .7s ease-in-out;
  background: black!important;

The issue I am facing is that the hiding and showing of the .content class is too slow, causing it to be visible before the rotation of .card_container is complete. How can I delay the rotation? I tried using .delay('slow') but it did not work.

I have included images below to demonstrate the before and after effects:

Before: https://i.sstatic.net/m6GPf.png

After: https://i.sstatic.net/MUhLc.png


EDIT

A fiddle has been created to provide a better understanding of my issue. Sorry for any confusion! https://jsfiddle.net/74vgvvhc/

As you can observe, there is a slight delay in the content (text) during the transition. My goal is to fade out the content, flip the card, and then fade in the other content smoothly.

Answer №1

If you want to implement a fadeToggle with a delay, you can try the following:

$('.container').on('click', function() {
  $('.content').toggleClass('hide');
  $('.container').toggleClass('card_active');
  $('.info').delay(500).fadeToggle('display');
})

Check out this JsFiddle for an example: https://jsfiddle.net/kjarriho/74vgvvhc/7/

I hope this explanation is helpful!

Answer №2

To implement the desired behavior, simply switch the class from '.info' to '.display' with a delay of 700 milliseconds, taking into account the transition time set for '.card_active' in the CSS file ('transition: .7s ease-in-out;').

$('.wrapper').on('click', function() {
  $('.content').toggleClass('hidden');
  $('.wrapper').toggleClass('active_card');
  $('.info').delay(700).fadeToggle('display');
})

For a live demonstration, visit this link https://jsfiddle.net/Rit_Design/eubrqnew/

Answer №3

To achieve the toggling of info and card_active classes after a 700ms delay, one method is to use setTimeout. Below is an example implementation:

$('.container').on('click', function() {
  $('.content').toggleClass('hide');
  $('.container').toggleClass('card_active');
  setTimeout(function() {
    $('.info').toggleClass('display');
    $('.container').toggleClass('card_active');
  }, 700);
})
html,
body {
  background: lime;
}
.container {
  width: 150px;
  height: 150px;
  background: white;
  border: 5px solid white;
}
.content {
  display: block;
}
.info {
  display: none;
}
.display {
  display: block;
}
.hide {
  display: none;
}
.card_active {
  transform: rotateY(180deg);
  transition: .7s ease-in-out;
  background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <span class='content'>The content</span>
  <span class='info'>The info</span>
</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

Clicking outside the navigation container will not cause it to disappear completely

When the width of my navigation bar reaches a maximum of 560px, a hamburger menu appears for mobile devices. I want to implement a functionality where clicking on a navigation item (e.g., About) will close the nav-container instead of making it disappear c ...

The jqgrid setCell function will erase any previously set formatter

When I use the setCell method in my jqgrid to set values for textboxes, it ends up removing the textbox formatter. Is there a way to keep the textbox intact and only replace the value? $("#acc_jqgrid").jqGrid('setCell', sel_id, 'jqgrid_accD ...

Applying FAB (Material UI) to span across 2 columns in a CSS Grid: A step-by-step guide

Is there a way to make the zero button larger than the other buttons in its row by spanning 2 columns? I would like it to be an oversized oval shape. Appreciate any assistance you can provide. import "./styles.css"; import Button from '@mui/materia ...

There seems to be an issue with the .html() function in one of my

I'm currently in the process of transitioning my code to Angular and I could use some assistance with creating a directive. Here's what I'm trying to convert: jQuery(document).ready(function ($) { "use strict"; $('#cool-naviga ...

Can you please provide a method for determining which characters are adjacent to each other

I am in the process of developing a markdown editor and I require a check to identify if adjacent characters are specific characters, removing them if they match or adding them otherwise. For example, if the selected text is surrounded by two asterisks li ...

Using AJAX to send both the complete form data and additional data not included in the form

When it comes to passing the entire form to AJAX, I've got that covered. data: $(this).serialize() But what I'm struggling with is how to pass both the form and values outside of the form. For example: var id = $('[name="formid"]'). ...

Having multiple jQuery animations running concurrently can lead to choppy transitions on a webpage

Here's a snippet of code that I'm working with: <hgroup id="ticker"> <div> <h1>First <span>Div</span></h1> <h2>This is the First Div</h2> <h6>This is the First Heading</h6> </div ...

Guide on incorporating an external JavaScript library into an Angular component for testing purposes

Encountering an issue with a component that utilizes an external JavaScript library called Leader-Line. Every time I attempt to test this component, an error is thrown indicating that the function from the external library is not defined. component file ...

align text vertically over an image

I've come across this question many times, but none of the answers seem to solve my issue. My challenge is centered around aligning text on an image with regards to vertical positioning. Below is the code I'm working with: <div class="col-sm- ...

Retrieve the contents of a nearby text file and store them in a variable

I've run into a frustrating issue that I just can't seem to solve. My goal is simple - fetch a local text file and store its contents in a variable. I've tried using different methods like the fetch API, $.get, and Ajax, but no matter what I ...

Exploring the World of Three.js: Modifying Facial Structures

Can anyone help me figure out how to obtain the average x, y, z coordinates of a specific face in three.js? Or, could someone guide me on extracting the individual x, y, z coordinates of the three vertices that compose a face and averaging them? Currently ...

Removing an item from an array in Mongoose

I'm encountering an issue with removing an Object from an Array and I'm unsure of the correct way to use $pull for this action. Any help would be greatly appreciated! JSON data "accountId": "62efd8c008f424af397b415d", "l ...

What is the process for updating the h1 header with text entered into an input field?

I'm working on an assignment that requires me to change the h1 heading to reflect whatever is entered into the input field. To accomplish this, I need to create a function using getElementByID. Here's what I've done so far: <!DOCTYPE htm ...

Refreshed the page following a setAttribute function call in Javascript

I have successfully implemented a function to switch between light and dark mode on my webpage using VueJS. However, I am facing an issue with the code: <a @click="toggleTheme" class="switch-mode" href> <div class=&q ...

Deactivate the submit button when the form is not valid in angularjs

I am currently facing a challenge with my form that contains multiple input fields. To simplify, let's consider an example with just two inputs below. My goal is to have the submit button disabled until all required inputs are filled out. Here is wha ...

Activate action after slideUp or slideDown animation finishes

Currently, I am implementing a basic slideUp animation on an object. However, I am struggling with adding an attribute tag to the element once the animation is complete. Any suggestions on how to make this work? if($(this).is(':visible')) { if ...

Troubleshooting issue: EJS loop not functioning correctly when handling JSON information

Having an issue with looping in an EJS file. Here's the data I'm working with: { "name": "Marina Silva", "info": [{ "periodBegins": "Sun Apr 14 23:48:36 +0000 2011", "periodFinishes": "Sun Apr 7 23:48:36 +0000 201 ...

What is the proper way to include a text label on the y-axis of a bar chart using d3.js

How can I display text on the y-axis tick points so that they remain the same even if the data changes? The desired tick point text is: ["Low", "Medium", "High"]. I have been experimenting with different solutions but haven&ap ...

Explain the assigned identifier for the input parameter

Trying to send data (Collection<Cars>) using AJAX with JQuery, but struggling to define the object in my Action input parameter. I attempted to define it as FormCollection and received all data successfully. However, my goal is to define it as IColle ...

I've been attempting to relocate a CSS element at my command using a button, but my previous attempts using offset and onclick were unsuccessful

I am trying to dynamically move CSS items based on user input or button clicks. Specifically, I want to increment the position of elements by a specified number of pixels or a percentage of pixels. Currently, I am able to set the starting positions (top a ...