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(); 
     }); 
    }); 
});