第一个动画完成后调用第二个动画答案

【问题标题】：Call a second animation once the first one is completed第一个动画完成后调用第二个动画
【发布时间】：2014-11-16 12:51:59
【问题描述】：

我无法弄清楚如何在 div 完成加载后调用动画。我的意思是我有一个菜单系统，一旦按下就会滑出并显示我的网站链接。我想做的是让菜单面板滑出，然后调用我的菜单链接动画。

用于淡入菜单链接的代码

 $(document).ready(function() {
  $('.menu-item').hide();                    
    (function animatenext(elem){
        elem.eq(0).fadeIn("slow", function(){
        (elem=elem.slice(1)).length && animatenext(elem);
    });
    })($('.menu-item'))
 });

用于滑动菜单的代码

 $("body").not(".gn-icon-menu").click(function() {
 $(".gn-icon-menu").removeClass("on");
   });

 $(".gn-icon-menu").click(function(e) {
 e.stopPropagation();
 $(this).toggleClass("on");

 });    

 $(function () {
  window.status = 0;
  $('#menu').click(function () {
    if ($('header').is('.open')) {
        var open = $('header').is('.open');
        $('#slideWrapper')['slide' + (open ? 'Up' : 'Down')](400);
        $('header').animate({
            bottom: (open ? '-' : '+') + '=200'
        }, 400, function () {
            $('header').removeClass('open');
        });

        if ($('.navFooter button').hasClass('activetoggle')) {
            $('.navFooter button').removeClass('activetoggle');
            $('.navFooter button').addClass('slidingPanel');
            $('.navFooter button').text('Footer');
        } 
        if ($('.gn-icon-menu').hasClass('activetoggle')) {
            $('.gn-icon-menu').removeClass('activetoggle');
            $('.gn-icon-menu').addClass('gn-icon-menu');

        } 
    }
    if (window.status == 0) {
        $('#slidingMenu').stop().animate({
            left: '0px'
        }, 500);
        window.status = 1;
        $('#slidingMenu').addClass('open');
    } else {
        $('#slidingMenu').stop().animate({
            left: '-100%'
        }, 500);
        window.status = 0;
        $('#slidingMenu').removeClass('open');
    }
    $('#slidingMenu').click(function () {
        if ($('#slidingMenu').is('.open')) {
    $('#slidingMenu').stop().animate({
        left: '-100%'
    }, 500);
    window.status = 0;
    $('#slidingMenu').removeClass('open');
}
    });
 });
 })

每次我的菜单系统滑出#slidingMenu时，如何调用我的菜单链接“.menu-item”来制作动画？

完整代码http://jsfiddle.net/xhnsnbrz/6/

【问题讨论】：

您可以在加载时使用添加类以及 scrollreveal.js
我正在使用的代码如何做到这一点？ @HarshalGajjar
我好久没写web代码了，不过我还是可以给你提供方法：github.com/julianlloyd/scrollReveal.js 滚动显示允许我们在div出现时为div做动画，因此，如果您使用此选项初始化一个类，然后将其（使用 onload 和一些延迟）添加到一个部门（或在这种情况下为 span），您将获得所需的结果。 :)
这似乎不适用于我的代码@HarshalGajjar
无需抱歉，感谢您尝试@HarshalGajjar

标签： javascript jquery html css jquery-animate

【解决方案1】：

如果你想在动画完成时触发一个函数：

$("#slidingMenu").stop().animate(
    {
       left: '0px'
    }, 500, animateItemMenu);

function animateItemMenu(){
    // ... write your code here
}

来源：http://api.jquery.com/animate/

【讨论】：

我尝试过这样做，但它会强制 #slidingMenu 显示而不是隐藏，直到单击为止。 @WissamEl-Kik