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');
}
});
});