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.