Question

我遇到一个事件完成动画后调用事件的问题。

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

菜单（点击后）

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

Answer 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

Answer 2

我要做的是在第一个事件结束时将变量设置为True。 e.g。

check = False

Your_event_1 check = True

if（check == True）： Your_event_2

第一个事件结束后调用事件

2 个答案: