動畫隊列使我的div變形的問題

所以，我有一個動畫下拉菜單，當鼠標移過它時滑落，然後在沒有時滑落。夠簡單。但是，如果在動畫完成向下移動之前使用鼠標移動鼠標，那麼它將跳到隊列末尾，暴露整個菜單然後變淡，或者它會縮短菜單的縮短時間，這取決於我傳遞的參數停止（）。動畫隊列使我的div變形的問題

我該如何解決這個問題？

編輯::

這裏的圖片是什麼我談論：

前： http://img192.imageshack.us/i/beforetc.jpg/

後： http://img682.imageshack.us/i/afterr.jpg/

$('.menu') 
    .mouseover(function() { 
     var subMenu = []; 

     $(this).next().children().each(function() { 
      subMenu.push($(this)); 
     }); 

     slideMenu(subMenu); 
    }); 

$('.menuItem').parent() 
    .mouseleave(function() { 
     $(this).find('.menuItem').children().stop(true,false).fadeOut(200); 
    }); 

function slideMenu(menu) { 
    var subMenu = $.makeArray(menu); 

    if (subMenu.length == 0) 
     return true; 
    else { 
     var menuItem = subMenu.shift(); 
     $(menuItem).slideDown(50, function() { slideMenu(subMenu); }); 
    } 
}

<div class='box'> 
    <div> 
     <div class='menu'>Resources</div> 
     <div class='menuItem'> 
      <div>Library</div> 
      <div>Internet</div> 
      <div>Your mom</div> 
     </div> 
    </div> 
</div>

來源

2010-02-19 Justen

第1步：發佈一些代碼與您的問題。 – user113716 2010-02-19 21:35:47

K，認爲它被解釋得不錯，但OP更新 – Justen 2010-02-22 13:17:18

也更新了照片 – Justen 2010-02-22 13:23:56

那麼我做了另一個遞歸方法，檢查元素是否動畫，然後停止並隱藏它。這裏的關鍵是分隔每個孩子，然後使用stop（）的第二個參數跳轉到動畫隊列的末尾。這將使孩子完全可見並滑下來，從而不會被截斷。在我使用[...].children().each(function() {})之前，它會跳過整個動畫隊列的結尾，影響所有的孩子。也許這會幫助處於困境中的其他人。

$('.menuItem').parent() 
    .mouseleave(function() { 
     var subMenu = []; 

     $(this).find('.menuItem').children().each(function() { 
      subMenu.push($(this)); 
     }); 

     hideMenu(subMenu); 
    }); 

function hideMenu(menu) { 
    var subMenu = $.makeArray(menu); 

    if (subMenu.length == 0) 
     return false; 
    else { 
     var menuItem = subMenu.shift(); 
     $(menuItem).is(':animated') ? $(menuItem).stop(false,true).hide() : 
             $(menuItem).fadeOut(300); 
     hideMenu(subMenu); 
    } 
}

來源

2010-02-22 19:53:16 Justen

動畫隊列使我的div變形的問題

回答

相關問題