jquery - 在另一个完成后运行一个 JQuery Functions

Question

我有两个 JQuery 函数，一个用于显示 Fancybox，第二个用于创建 owl-carousel，我希望 awl carousel 函数在 fancybox 函数运行后运行。

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