JQuery淡入功能似乎并没有被调用

Question

我有一个关于我用Jquery写下面的函数的问题。第一个功能正常工作。当页面加载时，jquery在几秒钟内使sidenav div淡出以显示：none。它右侧的div将向左滑动。背景变为红色只是一些测试，但是，它完美地工作。

第二个函数是一个可点击的事件...应该将滑动div返回到它的原始位置。它做什么。但是，它应该淡入，淡出OnpageLoad的div。这部分不起作用。 div保持隐藏状态。谁能帮我这个？我只需要＃sidenav-cont div在另一个div滑回原位后淡入视图。

$(document).ready(function() { 
    $("#sidenav-cont").delay(2000).fadeToggle(3000).queue(function() { 
    $(".colleft").show("slow").delay(100).animate({right:'+=350'},2000).queue(function() { 
     $(this).css('background-color','red').stop(true, true); 
    }); 
    }); 
}); 


$(document).ready(function() { 
    $("a.open").click(function() { 
    $(".colleft").show("slow").animate({left:'+=350'},2000).queue(function() { 
     $("#sidenav-cont").fadeToggle(3000); 
    }); 
    }); 
}); 

Answer 1

你的回调不叫dequeue()或next函数返回之前queue()作为参数提供。如果不能有效地锁定队列并解释为什么从未调用代码第二部分的回调。

尝试：

$(document).ready(function() { 
    $("#sidenav-cont").delay(2000).fadeToggle(3000) 
         .queue(function(next) { 
     $(".colleft").show("slow").delay(100).animate({right:'+=350'},2000) 
        .queue(function(next) { 
      $(this).css('background-color','red').stop(true, true); 
      next(); 
     }); 
     next(); 
    }); 
}); 

$(document).ready(function() { 
    $("a.open").click(function() { 
     $(".colleft").show("slow").animate({left:'+=350'},2000) 
        .queue(function(next) { 
      $("#sidenav-cont").fadeToggle(3000); 
      next(); 
     }); 
    }); 
});