Проверьте мою часть кода здесь http://jsfiddle.net/metalshan/eHG6X/ Что я хочу, если я нажму на зеленую полосу в левой части, ее ширина должна переключиться на 10% и 20%. При этом правая сторона также должна переключать ее ширину. Здесь левая часть работает хорошо, но когда я запускал функцию анимации для "#content",
$("#content").animate({
width: '90%'
})
он показывает анимацию #content, а не divs внутри нее. Если вы увидите код в jsFiddle, вы поймете.
Используйте absolute positioning
вместо плавания, и проблема решена.
#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
, а затем вы можете анимировать только одну панель, а не обе из них.
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;
});
Измените его на
$("#content").animate({ width: '90%'}, 100)