jQuery的動畫不能正常工作

檢查我的一片這裏 http://jsfiddle.net/metalshan/eHG6X/ 我要的是，如果我點擊左側的綠色欄上的代碼，其寬度應切換到10％和20％。在這樣做的同時，右側還應該切換其寬度。在這裏，留下部分工作很好，但是當我跑動畫功能爲「＃內容」，jQuery的動畫不能正常工作

$("#content").animate({ 
     width: '90%' 
    })

它顯示了＃內容生動活潑，而不是在它裏面的div。如果你看到jsFiddle中的代碼，你會明白。

來源

2013-09-26 Paul Shan

在你的小提琴中右邊的藍色條正在擴大。你期待什麼行爲？ – BenM

所有div在您的小提琴中完美展現 –

使用absolute positioning而不是浮動，問題就解決了。

jsFiddle Demo

#container{ 
    overflow: hidden; 
}  
#lower{ 
    position: relative; 
} 
#nav{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
} 
#content{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
}

編輯：

一個更好的選擇是使用absolutely positioned table，然後你可以動畫只有一個窗格，而不是他們兩個。

jsFiddle Demo

CSS：

html,body{ 
    overflow: hidden; 
} 
#container{ 
    overflow: hidden; 
} 
#lower{ 
    width:100%; 
    height:90%; 
    position: absolute; 
    top: 10%; 
    left: 0; 
    right: 0; 
    display: table; 
} 
#nav{ 
    display: table-cell; 
    height: 100%; 
    width:20%; 
} 
#content{ 
    display: table-cell; 
    width:80%; 
    height:100%; 
}

的jQuery：

$("#nav").click(function(){ 
    if (isSmall) $(this).animate({ width:'20%' }) 
    else   $(this).animate({ width:'10%' }) 

    isSmall=!isSmall; 
});

來源

2013-09-26 07:06:46 Itay

謝謝......這正是我想要的。非常感謝！ –

-1

將其更改爲

$("#content").animate({ width: '90%'}, 100)

來源

2013-09-26 07:10:11 Ronjon

jQuery的動畫不能正常工作

回答

相關問題