在另一個完成後運行JQuery函數

Question

我有兩個JQuery函數用來顯示Fancybox，第二個用來創建owl-carousel，我希望在fancybox函數運行後運行awl carousel函數。

$(document).ready(function() { 
    $(".fancybox1").fancybox({ 
     content : '<div class="col-md-6"><div id="fancybox12" class="owl-carousel owl-theme"><div class="item"><img src="img/portfolio/102.jpg" class="img-responsive" alt="..."></div></div></div><div class="text-center col-md-6"><h1> T-Shirts & Fabric Printing </h1></div> ' 
    }), 
    $("#fancybox12").owlCarousel({ 
      navigation : false, // Show next and prev buttons 
      slideSpeed : 300, 
      paginationSpeed : 400, 
      singleItem:true 
    }); 
}); 

但我無法獲得回調工作。請幫助我。 感謝

Answer 1

嘗試讓他們在一個單獨的函數，然後調用像這樣的功能：

(document).ready(function() { 
    runfancybox(); 

    function runfancybox(){ 
    $(".fancybox1").fancybox({ 
      content : '<div class="col-md-6"><div id="fancybox12" class="owl-carousel owl-theme"><div class="item"><img src="img/portfolio/102.jpg" class="img-responsive" alt="..."></div></div></div><div class="text-center col-md-6"><h1> T-Shirts & Fabric Printing </h1></div> ' 
     }); 
     runOwlCarousel(); 
    } 


    function runOwlCarousel(){ 
     $("#fancybox12").owlCarousel({ 
      navigation : false, // Show next and prev buttons 
      slideSpeed : 300, 
      paginationSpeed : 400, 
      singleItem:true 
      });  
    } 
});