jquery爲div設置動畫效果，當完成時，在第一個div裏面設置第二個div的動畫

Question

我在網頁上有一個標題（140px高度），內容爲5「li」。這個（A，B，C）的前3個在「.mouseover」時打開一個子標題（50px高度），其他2個（D，E）全部關閉。

jq(document).ready(function(){ 
     jq("#A a,#B a,#C a").mouseover(function(){ 
      jq("#subheader").animate({top:"140px"},"normal"); 
     }); 

     jq("#D a,#E a").mouseover(function(){ 
      jq("#subheader").animate({top:"91px"},"normal"); 
     }); 
    }); 

直到這裏一切正常，現在出現了問題。取決於哪個A，B或C懸停必須在子動畫上做不同的事情，就在動畫結束時。 （內子頭開.smenus）

 jq("#A a").mouseover(function(){ 
      jq(".smenu1").slideDown("slow"); 
      jq(".smenu1 ul").animate({margin:"0px auto"},"slow"); 
      jq(".smenu1 li").animate({padding:"0 30px 0"},"slow"); 

     }); 
     jq("#B a").mouseover(function(){ 
      jq(".smenu2").slideDown("slow"); 
      jq(".smenu2 ul").animate({margin:"0px auto"},"slow"); 
      jq(".smenu2 li").animate({padding:"0 30px 0"},"slow"); 

     }); 
     jq("#C a").mouseover(function(){ 
      jq(".smenu3").slideDown("slow"); 
      jq(".smenu3 ul").animate({margin:"0px auto"},"slow"); 
      jq(".smenu3 li").animate({padding:"0 30px 0"},"slow"); 

     }); 

這不起作用，我想是因爲它完成suheader開幕前開始加載。所以我必須在開幕式結束時做這個動畫。

PD：現在又是一件事，例如當#A被徘徊，然後#B，它必須停止動畫（如果沒有完成，或者只是回調），移除其他子菜單（在這種情況下.smenu1 ）並替換它們的子菜單（在這種情況下是.smenu2）。 #D和#E必須做同樣的事情，把一切都回到開始。

編輯：

感謝西門，我有更多或更少的這樣：http://jsfiddle.net/PAXqB/4/

最後實現與。點擊（讓它），而不是用.mouseover（）有這樣三種情況：

• 情況1：與鼠標懸停相同，全部打開。
• 案例2：再次點擊相同的Main，都必須像我的例子那樣關閉。
• 案例3：點擊其他主菜單，關閉子菜單，而不是suheader，然後打開新的子菜單。

Answer 1

我必須說我必須多次閱讀你的問題，我還不確定我是否理解你，但這是你想達到的目標嗎？ http://jsfiddle.net/PAXqB/

$(document).ready(function() { 
    $('ul.main > li').bind('mouseover mouseout', function(e) { 
     var t = $(this), i = t.index(), sub = t.find('.sub'); 
     if(i < 3) 
      switch(e.type) { 
       case 'mouseover': 
        sub.stop(true).slideDown(function() { 
         $(this) 
          .stop(true) 
          .animate({ margin:"20px 0 0" }) 
          .find('li') 
          .stop(true) 
          .animate({ padding:"0 10px 0" }); 
        }); 
        break; 
       case 'mouseout': 
        sub.stop(true).slideUp('fast', function() { 
         $(this) 
          .removeAttr('style') 
          .find('li') 
          .removeAttr('style'); 
        }); 
        break; 
      } 
    }); 
}); 

我稍微調整了動畫，樣式，所以它看起來在我的jsfiddle平滑一些，但我希望它可以幫助你。

Answer 2

你有幾個選項

.animate()有一個完整的回調選項：

jq(".smenu2 ul").animate({margin:"0px auto"},"slow", function() { 
    // code here is executed after this animation is complete 
}); 

使用，是這樣的：

jq(".smenu2").slideDown("slow");  
jq(".smenu2").queue(function() { 
    jq(".smenu2 ul").animate({margin:"0px auto"},"slow"); 
    jq(this).dequeue(); 
}); 
jq(".smenu2 li").animate({padding:"0 30px 0"},"slow"); 

這個簡單的隊列你的動畫的要求並按順序執行

Answer 3

首先，我建議您整理代碼以提高可讀性並使其更易於使用。例如：

$("#A a, #B a, #C a").on('mouseover', function(){ 
      $menu = $(this).find(".menu"); 
      $menu.slideDown("slow"); 
      $menu.find("ul").animate({margin:"0px auto"},"slow"); 
      $menu.find("li").animate({padding:"0 30px 0"},"slow"); 
     }).on('mouseout', function(){ 
      $(this).find(".menu").stop(true, true); 
}); 

完全測試，但是這應該是在右邊線在得到您的代碼工作方面 - 的.stop（）方法是你的答案的第二部分。

Answer 4

的sooo這將是我最好的解決辦法，到目前爲止的平板電腦：jsfiddle 我正在它的作用完全一樣，你想要一個版本（容器只是向下滑動/向上，如果沒有是可見的或點擊的項目是活躍的），但在動畫atm方面有些麻煩。

$(document).ready(function() { 

    var active = 'active'; 

    $('ul.main > li').bind('click', function() { 

     var t = $(this), 
      i = t.index(), 
      c = $('.sub-container'), 
      sub = $($('.sub').get(i)), 
      isActive = t.hasClass(active), 
      li = sub.find('li'), 
      liCount = li.length; 

     c.slideUp('fast', function() { 
      c.find('*').removeAttr('style'); 
      t.siblings().removeClass(active); 
      if(i < 3) { 
       if(isActive) t.removeClass(active); 
       else { 
        t.addClass(active); 
        c.slideDown(function() { 
         sub.slideDown(function() { 
          li.animate({ 
           width: (100/liCount) + '%' 
          }); 
         }); 
        }); 
       } 
      } 
     }); 

    }); 

});