ArDem 14 мая 2010 в 17:26

Имитируем height:auto при использовании animate()

6 мин

21K

Комментарии 9

Voenniy 14 мая 2010 в 17:41

$(document).ready(function(){
var first=0;

$(«a.menu»).click(
function(){
if(first!=0)
{
$(«div.magic»).hide(500,function(){$(«div#magic»+ this.id).show(500); });
}
else
{
first=1;
$(«div#magic»+ this.id).show(500);

}

}
);
})

Так, во втором случае, должно в нужном порядке скрываться/появляться (т.е. не одновременно).

Voenniy 14 мая 2010 в 17:46

так короче код:
$(«a.menu»).click(
function(){
$(«div.magic»).hide(500,function(){$(«div#magic»+ this.id).show(500); });
});

Поидее всё должно работать.

ArDem 14 мая 2010 в 18:10

Так не совсем верно работает. Поскольку блоков класса «magic» несколько, при выполнении hide, идет пробег по всем, и в this.id будет записываться id текущего, а не id ссылки, по которой кликнули.

Поэтому я решил hide применять только к уже открытому блоку, для чего ввел еще одну переменную last_id, а потом в show использую не this.id, а переменную now_id, куда предварительно записываю id ссылки, по которой кликнули.

Вобщем, вот что получилось:

$(document).ready(function(){
var first=0;
var last_id=0;
var id_now=0;

$(«a.menu»).click(
function(){
id_now=this.id;

if(first!=0)
{
$(«div#magic»+ last_id).hide(500,function(){
$(«div#magic»+ id_now).show(500);
});
}
else
{
first=1;
$(«div#magic»+ this.id).show(500);
}

last_id=id_now;
}
);
})

Спасибо большое, совместными усилиями мы эту проблему решили. Сейчас в самом топике исправлю.

Voenniy 14 мая 2010 в 18:21

Вот, накидал такое меню, может пригодится:

<html> <head> <script type="text/javascript" src="http://yandex.st/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".main li").click(function(){ thisLi = this; if($(".main ul:not(:hidden)").length>0){ $(".main ul:not(:hidden)").hide('slow', function(){ $(thisLi).children('ul').show('slow'); }); } else { $(thisLi).children('ul').show('slow'); } }); }) </script> <style type="text/css"> .main ul {display:none} </style> </head> <body> <ul class='main'> <li> Меню1 <ul> <li>Меню1.1</li> <li>Меню1.2</li> <li>Меню1.3</li> </ul> </li> <li> Меню2 <ul> <li>Меню2.1</li> <li>Меню2.2</li> <li>Меню2.3</li> </ul> </li> <li> Меню3 <ul> <li>Меню2.1</li> <li>Меню2.2</li> <li>Меню2.3</li> </ul> </li> </ul> </body> </html> * This source code was highlighted with Source Code Highlighter.