Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   проблема с div И animate (https://javascript.ru/forum/jquery/15935-problema-s-div-i-animate.html)

g00000dman 19.03.2011 20:53

проблема с div И animate
 
Всем привет, прошу сразу не судить строго, я только учусь )). Понадобилось сделать раздвижное меню, что то похожее на меню в стиле аккордион. Есть главный блок div, который находится посредине страницы, ну и собственно меню ссылки внутри него. При нажатии на ссылку, главный div изменят свою ширину с помощью функции animate и также становится посредине, и параллельно с ним должен расширятся div внутри, в котором будет контент. но почемуто div внутри не раздвигается если добавить раздвижении главного, а без него анимация с помощью функции animate работает, но не плавно.

Исходный код по возможности упростил как мог, чтобы выложить сюда.

P.S. перед этим была попытка сделать точно такое же меню, но используюя ul и li, и там ВСЕ РАБОТАЛО, но понадобилось сделать именно используя div

За ранее Спасибо всем тем кто откликнется

<div id="content">
	<div><a href="#" name="a1"><img src="img/img-main-off.png" ></a></div>
    <div id="asd"></div>
    <div><a href="#" name="a2"><img src="img/img-about-off.png" ></a></div>
    <div ></div>
    <div><a href="#" name="a3"><img src="img/img-location-off.png" ></a></div>
    <div></div>
    <div><a href="#" name="a4"><img src="img/img-about-off.png" ></a></div>
    <div></div>
    <div><a href="#" name="a5"><img src="img/img-location-off.png" ></a></div>
    <div></div>
</div>


$(document).ready(function(){
	
	var openclose = '';
	var menuname = '';
	var oldmenuname ='';
	$("#content div a").click(function(){
		if  (openclose == '') 
		{
			menuname = this.name;
			$('#content').animate({'width':'960px','margin-left':'-480px'},500);
			$('#asd').animate({'width':'659px'},500);
		}
		else
		{
		};
	});
		
});


Код:

#content{
        width:300px;
        height:460px;
        position:absolute;
        left:50%;
        top:230px;
        padding:0px;
        margin-left: -150px;}

#content div {
        float: left;
        display:inline-block;
}


phgrey 21.03.2011 20:15

эт. верстка. для того чтобы разъезжались дочерние дивы им нужно свойство width указать 100%, например так
#content div{width:100%;}

g00000dman 24.03.2011 22:34

спасибо, сейчас проверю


Часовой пояс GMT +3, время: 21:54.