第一个活动结束后，呼叫一个活动 [英] Call an event once the first event has finished

问题描述

一旦一个事件完成动画设置，我在调用事件时就会遇到问题.

I am having problem with calling an event once one event has finished animating.

我正在运行2个事件.我想要实现的是当第一个事件完全完成时(由click函数控制)，然后我想运行第二个事件，该事件将在我的链接中消失.我尝试在#slidingMenu出现时应用.done函数动画化后，链接一旦动画完成就不会消失，它们只是保持静态.

I have 2 events running. What I am trying to achieve is when the first event is completely finished (it is controlled by a click function) then I want to run the second event which will fade in my links.I tried applying a .done function for when #slidingMenu has animated in but the links do not fade in once the animation is completed, they just stay static.

菜单(点击)

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

菜单链接会淡入

  $.when.apply(this, '#slidingMenu').done(function() {
        $('.menu-item').each(function(i) {
  $(this).fadeOut(0).delay(1000*i).fadeIn(1850);
      });
 });

http://jsfiddle.net/xhnsnbrz/7/

推荐答案

您可以将回调函数添加到animate函数中，该函数在动画结束时运行:

You can add a callback function to the animate function, which runs when the animation is finished:

$(element).animate(options, timeout, callbackFunction);

因此，在您的情况下，您可以将fadeOut放到该函数中:

So in your case, you could put your fadeOut inside a function there:

$('#slidingMenu').stop().animate({
    left: '0px'
}, 500, function(){
    $('.menu-item').each(function(i) {
      $(this).fadeOut(0).delay(1000*i).fadeIn(1850);
    });
});

工作 jsFiddle

如您所见，菜单项是短暂可见的，因为它们只有在动画完成后才被隐藏.更好的方法是在开始动画之前进行隐藏，并且只在回调中执行fadeIn:

As you see, the menu items are briefly visible because they only are hidden once your animation has finished. A better way would be to do the hiding before you even start the animation, and only do the fadeIn in the callback:

$('.menu-item').fadeOut(0); // no need for an each here

$('#slidingMenu').stop().animate({
    left: '0px'
}, 500, function(){
    $('.menu-item').each(function(i) {
      $(this).delay(1000*i).fadeIn(1850);
    });
});

还带有 jsFiddle

这篇关于第一个活动结束后，呼叫一个活动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！