Question

我在startIndex()函数中有这个顺序代码，在hidePace()之前执行showFullMenu()：

function startIndex(){
    hidePace().done(
            showFullMenu()
            );
}

这可以正常运行，在hidePace()操作之前应用showFullMenu()操作，但是当hidePace上包含的操作完成后，Firefox控制台会出现错误：TypeError: hidePace(...) is undefined

即使这项工作正常，我也想知道这个错误的原因，因为hidePace()存在并且有效。

功能：

function hidePace(){
   $height = $(window).height(); 

   setTimeout(function(){    
      $('.pace-progress,.velo2').animate({'opacity': 0,queue: false},0);
      $('.logoL,.logoLback').animate({'top': '-'+$height,'opacity':0,queue: false},3000); 
   },500);

   setTimeout(function(){ 
      $('.velo').animate({'opacity': 0},1000);      
   },700);  

   setTimeout(function(){
     $('.menuOff').animate({'width': $height-260,queue: false});
     $('.logoL,.logoLback,.velo,.velo2').remove();
  },3000);   
}

function showFullMenu(){
    setTimeout(function(){
      if(mobileView===0){ 
        $('.textc').animate({'width': 148,queue: false}, 1200,"easeInQuart");
      }},1500);   

   setTimeout(function(){
     if(mobileView===0){ 
        $('.textc,.menu').css('border', 'none').animate({'height': $height-210,queue: false}, 1000,"easeInQuart", function(){
             $('.sub1').css('top',$('.multilevel[data-id=1]').offset().top);
             $('.sub2').css('top',$('.multilevel[data-id=2]').offset().top);
             $('.sub3').css('top',$('.multilevel[data-id=3]').offset().top);
        });     
    }

     $('.menuOff').animate({'width': $height-260,queue: false});
},3000);
}


function startIndex(){
    hidePace().done(
            showFullMenu()
            );
}

HTML：

<body>
      <div class="logoLback"></div>
      <div class="logoL"></div>      
      <div class="velo"></div>
      <div class="velo2"></div>


      <div class="logoBar"><img src="img/mobilemenu1.jpg" alt="menu" class="mobileMenu"/><img class="logo2" src="img/LOGO2.jpg" alt="logo"></div>

      <div class="bk8"></div>
      <div class="bg" data-ibg-bg="img/slides/04.jpg">
      <div class="pattern"></div>

      <header>

      <div class="logo"></div>  

      <div class="touchTextc"></div> 
        <ul class="touchMenu">
           <li class="" data-id="17">1</li>
           <li class="" data-id="1">2<span>+</span></li>
           <li class="" data-id="2">3<span>+</span></li>
           <li class="" data-id="3">4<span>+</span></li>
           <li class="" data-id="19">5</li>
           <li class="" data-id="99">6</li>
           <li class="" data-id="03">7</li>
           <li class="" data-id="02">8</li>
           <li class="" data-id="07">9</li>
        </ul>


      <div class="textc"></div>      
        <ul class="menu">
           <li class="multilevel lightMe" data-id="1">Cocinas<span>+</span></li>
           <li class="multilevel lightMe" data-id="2">2<span>+</span></li>
           <li class="multilevel lightMe" data-id="3">3<span>+</span></li>
           <li class="lightMe executeGallery dynamicBack"  data-back="25" data-href="demo.html">4</li>
           <li class="lightMe executePanel dynamicBack" data-back="26" data-href="demo.html">5</li>
           <li class="lightMe executePanel dynamicBack blog" data-back="99" data-href="demo.html">6<img class="popup" src="img/popup.png" alt=""/> </li>
           <li class="lightMe executePanel dynamicBack" data-back="98" data-href="demo.html">7</li>
           <li class="lightMe executePanel dynamicBack" data-back="96" data-href="demo.html">8</li>
           <li class="lightMe executePanel dynamicBack" data-back="97" data-href="demo.html">9</li>
        </ul>



      <ul class="submenu sub1" data-id="1">
         <li class="lightMe"><a href="#" data-back="06"  class="dynamicBack" data-href="cocinas-.html">1</a></li>
         <li class="lightMe"><a href="#" data-back="07"  class="dynamicBack" data-href="cocinas-.html">2</a></li>
         <li class="lightMe"><a href="#" data-back="03"  class="dynamicBack" data-href="cocinas-.html">3</a></li>
         <li class="lightMe"><a href="#" data-back="01"  class="dynamicBack" data-href="cocinas-.html">4</a></li>
         <li class="lightMe"><a href="#" data-back="02"  class="dynamicBack" data-href="cocinas-.html">5</a></li>
         <li class="lightMe"><a href="#" data-back="05"  class="dynamicBack" data-href="cocinas-.html">6</a></li>    
         <li class="lightMe"><a href="#" data-back="18"  class="dynamicBack" data-href="cocinas-.html">7</a></li>    
         <li class="lightMe"><a href="#" data-back="19"  class="dynamicBack" data-href="cocinas-.html">8</a></li>    
      </ul>



      <ul class="submenu sub3" data-id="3">
         <li class="lightMe"><a href="#" data-back="12"  class="dynamicBack" data-href="1.html">demo</a></li>
         <li class="lightMe"><a href="#" data-back="13"  class="dynamicBack" data-href="2.html">demo</a></li>
         <li class="lightMe"><a href="#" data-back="14"  class="dynamicBack" data-href="3.html">demo</a></li>
         <li class="lightMe"><a href="#" data-back="15"  class="dynamicBack" data-href="4.html">demo</a></li>
         <li class="lightMe"><a href="#" data-back="16"  class="dynamicBack" data-href="5.html">demo</a></li>
         <li class="lightMe"><a href="#" data-back="17"  class="dynamicBack" data-href="6.html">demo</a></li>
      </ul>  

      <ul class="submenu sub2" data-id="2">
         <li class="lightMe"><a href="#" data-back="08"  class="dynamicBack" data-href="2.html">demo</a></li>
         <li class="lightMe"><a href="#" data-back="09"  class="dynamicBack" data-href="3.html">demo</a></li>
         <li class="lightMe"><a href="#" data-back="10"  class="dynamicBack" data-href="4.html">demo</a></li>
         <li class="lightMe"><a href="#" data-back="11"  class="dynamicBack" data-href="5.html">demo</a></li>
      </ul>



      </header>
      <div id="content2"></div>
      <div class='backsC'></div>

         <script type="text/javascript">
              $(".bg").interactive_bg();
         </script>
      </div>




      <script>
          Pace.on("done", function(){
             startIndex(); 
          });

        </script>

   </body>

Answer 1

注意，在options的{{1}}处出现语法错误，其中.animate()（如果提供）应位于与动画属性不同的对象中。

在问题的options处，js的{{1}}未返回任何jQuery承诺，以便链接到hidePace。

尝试使用.done()，delay()，.promise()

$.when()

JavaScript错误 - TypeError：<function>未定义

1 个答案: