第一个事件完成后调用事件答案

【问题标题】：Call an event once the first event has finished第一个事件完成后调用事件
【发布时间】：2014-09-23 16:14:18
【问题描述】：

一旦一个事件完成动画，我在调用一个事件时遇到问题。

我有 2 个活动正在运行。我想要实现的是当第一个事件完全完成时（它由点击功能控制）然后我想运行第二个事件，它将在我的链接中淡出。我尝试在#slidingMenu 有时应用 .done 函数动画，但动画完成后链接不会淡入，它们只是保持静止。

菜单（点击时）

 $(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/

【问题讨论】：

很抱歉我忘记插入了。我对我的评论进行了编辑并放置了一个小提琴链接@Eirenaios
你必须使用回调，回调是在当前函数完成后调用的函数，例如：fadeIn(1850, function (){console.log('I have finished :)') ;});
我应该在哪里添加回调？ @sudo.ie

标签： javascript jquery html css

【解决方案1】：

您可以在animate函数中添加一个回调函数，该函数在动画结束时运行：

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

所以在你的情况下，你可以将你的 fadeOut 放在一个函数中：

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

工作jsFiddle

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

$('.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

【讨论】：

它有效，但有一个问题。你会在你的小提琴上注意到链接首先显示然后消失然后淡入。我怎样才能解决这个问题@Stephan Muller
我已经预见到了这个问题并在几分钟前更新了答案:)
关闭菜单后是否可以淡出链接@Stephan Muller
当然，在关闭函数上你可以添加一个类似的回调函数。

【解决方案2】：

我要做的是有一个变量，它只在第一个事件结束时设置为 True。例如

检查 = 假

你的_event_1 检查=真

如果（检查 == 真）： Your_event_2

【讨论】：

我将如何在我的代码中实现它以及它如何工作？ @AGMC
在#slidingMenu 动画后，添加'check = true' 行。就在链接淡入淡出之前添加 if 语句。在任何可执行代码之前添加“检查”的定义。