jQuery SlideDown和邊框-奇怪的跳轉

Question

當我在具有邊框的元素上使用jQuery的SlideDown功能時，確實出現了奇怪的跳轉問題。

這是用來說明我的意思的小提琴： http : //jsfiddle.net/Complexity/um9xj/為了進行測試，我將持續時間設置為700

$(element).slideDown({
    duration: 700
}).parent().addClass("active");

當您單擊新項目按鈕時，您會看到我的意思。 我希望有一個非常簡單的解決方案。

Answer 1

嘗試這個：

演示版

看起來像是向下動畫，應用了margin-top並向下跳了一個像素。

編輯 -左邊框問題似乎是因為您將menucontents元素定位在left:-4px位置，因此將其放置在menu元素之外。 直到您執行slideDown（）動畫，並自動將menu設置為overflow:hidden ，這才成為問題overflow:hidden一個簡單的解決方法是將位置移動到父元素。

CSS：

.icon .menu { 
   box-shadow: 0 0 0 #888; 
   display: none; 
   left:0px;
   top: 60px;
  /* margin-top:-1px; */
}

.menucontents {
  //other styles

 /* left: -4px */
}

Answer 2

jQuery slideUp和slideDown動畫為內容框的height設置動畫，即margin-top ， margin-bottom ， padding-top和padding-bottom的height 。 您的頁margin-top: -1px正在設置動畫，但只能是1或0，這就是為什么它跳到一半的原因。 擺脫margin-top將解決此問題。 如果您希望避免更改CSS，則可以覆蓋邊距編輯，如下所示：

$(element).slideDown({
    duration: 700,
    progress: function(){$(element).css('marginTop', '-1px')}
}).parent().addClass("active");

進度函數被稱為動畫的每一幀，並將覆蓋jQuery對您的空白的更改

編輯：我嘗試過嘗試覆蓋溢出，但是由於我無法確定的原因，它無法正確呈現。 我建議您對第二個問題進行CSS編輯。 由於您要放置菜單，因此只需使用最外面的div來修改您的位置，然后讓內部的div只擔心內容：

.icon .menu {
    box-shadow: 0 0 0 #888;
    display: none;
    left: 0;
    margin-top: -1px;
}

.menucontents {
    padding: 1px;
    padding-left: 2px;
    z-index: 100;
    background-color: white;
    /* left: -4px; *
    ...