Question

一旦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/

Answer 1

如果要在动画完成时触发功能：

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

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

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

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

1 个答案: