javascript - css 动画完成后使用 jquery 淡入页面

Question

我有一个分成两半的屏幕，根据您单击哪一侧，它们应该像窗帘一样滑开，然后淡入另一页。我已经用 css 制作了动画，并使用 jquery 在点击事件上添加了适当的类。

我遇到的问题是如何让新页面在 css 动画完成后淡入？

这是我的 jquery:

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

FadeIn 函数有一个回调，您可以按如下方式使用:

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

$(".container").fadeIn({ done: function() { // Fade rest of page in } });