Question

我有一个关于我在下面发布的Jquery编写的函数的问题。第一个功能正常。当页面加载时，Jquery会在几秒钟内创建一个sidenav div fadeout来显示：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();
        });
    });
});

JQuery Fade-In函数似乎没有被调用

1 个答案: