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

Call an event once the first event has finished

本文关键字：事件 一个 调用 结束 第一个      更新时间：2023-09-26

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

我有两个项目在进行中。我试图实现的是，当第一个事件完全完成时（它由点击功能控制），然后我想运行第二个事件，它将在我的链接中消失。当#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/

您可以向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

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

check=错误

Your_event_1check=真实

if（check==True）：Your_event_2

相关文章：