當我放入幻燈片放映時，滑下框菜單停止工作

Question

我是新來的網頁設計，真的需要一些類項目的幫助。我有我使用的是下面的JavaScript從http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/

<!-- The JavaScript --> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      /** 
      * for each menu element, on mouseenter, 
      * we enlarge the image, and show both sdt_active span and 
      * sdt_wrap span. If the element has a sub menu (sdt_box), 
      * then we slide it - if the element is the last one in the menu 
      * we slide it to the left, otherwise to the right 
      */ 
      $('#sdt_menu > li').bind('mouseenter',function(){ 
       var $elem = $(this); 
       $elem.find('img') 
        .stop(true) 
        .animate({ 
         'width':'170px', 
         'height':'170px', 
         'left':'0px' 
        },400,'easeOutBack') 
        .andSelf() 
        .find('.sdt_wrap') 
        .stop(true) 
        .animate({'top':'140px'},500,'easeOutBack') 
        .andSelf() 
        .find('.sdt_active') 
        .stop(true) 
        .animate({'height':'170px'},300,function(){ 
        var $sub_menu = $elem.find('.sdt_box'); 
        if($sub_menu.length){ 
         var left = '170px'; 
         if($elem.parent().children().length == $elem.index()+1) 
          left = '-170px'; 
         $sub_menu.show().animate({'left':left},200); 
        } 
       }); 
      }).bind('mouseleave',function(){ 
       var $elem = $(this); 
       var $sub_menu = $elem.find('.sdt_box'); 
       if($sub_menu.length) 
        $sub_menu.hide().css('left','0px'); 

       $elem.find('.sdt_active') 
        .stop(true) 
        .animate({'height':'0px'},300) 
        .andSelf().find('img') 
        .stop(true) 
        .animate({ 
         'width':'0px', 
         'height':'0px', 
         'left':'85px'},400) 
        .andSelf() 
        .find('.sdt_wrap') 
        .stop(true) 
        .animate({'top':'25px'},500); 
      }); 
     }); 
    </script> 

當我試圖把一個幻燈片頁面上的滑動導航，導航停止工作。我已經嘗試了幾次幻燈片演示，其中有一些類型的衝突。我試圖使用的是從http://www.jacklmoore.com/monte。

感謝您的幫助。

Answer 1

您正在調用動畫並多次全部停止。你可以通過兩種方式來構建隊列系統（jQuery does have one），或者使用提供的回調函數（在函數完成工作後運行的函數）。

需要明確的是，像這樣的代碼都跑一次：

a.animate1() 
b.animate2() //animate2 doesn't wait for animate 1, thus, use of callbacks and/or queues. 

作爲一個側面說明，看是否可以減少代碼的部分，你已經使用了很多切+通過粘貼使用功能。項目祝你好運！