Подгрузка контента в див и его ресайз

[Gosha]

Здравствуйте, товарищи. Я программист, но в жаваскриптах не силен. Задумал одну простенькую вещь. Логически понимаю, как это сделать, но реализовать программно не получается. Прошу вашей помощи.

По задумке, имеется на странице список ссылок. При нажтии на одну, под ней расскроется соответствующий блок с некоторым содержимым, который подгружается AJAXом из PHP скрипта. С этим проблем не возникло. Дальше я решил подключить функцию, которая развернет соответствующий див плавно. И это тоже сделал. Все работает, если картинки в нем закэшированы. А если нет, див открывается на высоту, равную надписи alt'а изображения, пока она еще не загружена. А когда полностью появляется, оказывается за рамками, разрушая всю верстку.

Дальше по задумке, нужно так же плавно сворачивать див, при нажатии на ссылку повторно. Но не удалять его содержимое, чтобы при уже следующем клике, див раскрылся без повторной подгрузки контента из PHP.

Вот имеется следующие блоки

<div class="topic_block">
<a href="#" onclick="topic('1', 'monkey'); return false;">Текст</a>
</div>
<div class="big_topic" id="monkey"></div>


<div class="topic_block">
<a href="#" onclick="topic('2', 'parrot'); return false;">Текст</a>
</div>
<div class="big_topic" id="parrot"></div>

...


<div class="topic_block">
<a href="#" onclick="topic('3', 'dog'); return false;">Текст</a>
</div>
<div class="big_topic" id="dog"></div>

И имеется такой жаваскрипт

function topic(a, b) {
//Тут блок должен свернуться, если он открыт
	if (($("#"+b).text() !== '') && ($("#"+b).css("height") !==0)) {
		$("#"+b).css("overflow", "hidden");
		$("#"+b).animate({height: 0}, 500);
		return;
	}
//Тут блок должен развернуться, если он закрыт, но в нем есть контент
	if (($("#"+b).text() !== '') && ($("#"+b).css("height") ==0)) {
		$("#"+b).css("overflow", "hidden");
		$("#"+b).animate({height: $("#"+b)[0].scrollHeight}, 500);
		return;
	}
//А тут выполняется код, если блок пустой и закрытый
	$("#"+b).css("height", "0px");
	$("#"+b).css("overflow", "auto");
	$("#"+b).html("Загрузка...");
	$.ajax({
		type: "POST",
		url: "doit.php",
		data: "id="+a, 
		success: function(msg){
			$("#"+b).html(msg);
			$("#"+b).animate({height: $("#"+b)[0].scrollHeight}, 500);
		}
	});
}

Проблема еще возникает, когда блок сворачивается. Сначала все нормально. Но как тлько анимация завершится, картинка тут же вылезает за края нулевопиксельного блока во всю высоту, опять же ломая верстку. Подскажите, пожалуйста, что подправить. И как можно оптимизировать мой чайниковый код. Который я писал, основываясь на знаниях ООП

[Андрей38]

...только анимация завершится,
По этому делу,только
$("#"+b).animate({height: $("#"+b)[0].scrollHeight}, 500,function(){
$('твоя картинка') .css({'height':0}) или hide()
})
потом вернуть на место ее начальный сиэсэс не забудь или show() ,если хайданутая

[Gosha]

Спасибо. Это получается, что нужно еще картинкам id добавлять? А если там несколько картинок, и все в купе с текстом. В виде небольшой статьи?

[Андрей38]

Спасибо. Это получается, что нужно еще картинкам id добавлять? А если там несколько картинок, и все в купе с текстом. В виде небольшой статьи?

Так пусть себе скрываеться ВСЕ содержимое блока по окончании анимции картинки
А если речь об айди то просто хайдани всЕ в ПАРЕНТЕ картинки
$('Айди блока img').parent().hide()
да и вообще Просто $('Айди блока').children().hide()

И еще, если заметишь, что анимация как то странно себя ведет ,то вот -микстура
$("#"+b).stop().animate(

[Gosha]

Спасибо, все начинает получаться.

[Gosha]

Извините, еще один вопрос, можно ли как-то идентифицировать состояние дива (закрыт с неподгруженным контентом | открыт | закрыт с подгруженным контентом) кроме того способа, что испытал я (по высоте дива, и наличию хоть какой-то строки в нем)

Сейчас у меня получился такой код, и не получается расскрыть див с уже имеющимся контентом.

function topic(a, b) {
//Тут див закрывается, если он открыт
	if (($("#"+b).text() !== '') &&  $("#"+b).css("height") !== 0){
		$("#"+b).css("overflow", "hidden");
		$("#"+b).animate({height: 0}, 500,function(){
				$("#"+b).children().hide()
		})
		return;
	}

//Тут див должен открыться с уже имеющимся контентом
	if ($("#"+b).children().hide()){
		$("#"+b).css("height", "0px");
		$("#"+b).css("overflow", "auto");
		$("#"+b).animate({height: $("#"+b)[0].scrollHeight}, 500,function(){
				$("#"+b).children().show()
			})
		return;
	}

//Тут див открывается, подгружая контент
	$("#"+b).css("height", "0px");
	$("#"+b).css("overflow", "auto");
	$("#"+b).html("Загрузка...");
	$("#"+b).children().show();
	$.ajax({
		type: "POST",
		url: "doit.php",
		data: "id="+a, 
		success: function(msg){
			$("#"+b).html(msg);
			$("#"+b).animate({height: $("#"+b)[0].scrollHeight}, 500,function(){
				$("#"+b).children().show()
			})
		}
	});
}

[Андрей38]

function topic(a, b) {
//Тут див закрывается, если он открыт
	if (($("#"+b).text() !== '') &&  $("#"+b).css("height") !== 0){
		$("#"+b).css("overflow", "hidden");
		$("#"+b).animate({height: 0}, 500,function(){
				$("#"+b).children().hide()
		})
		return;
	}

//Тут див должен открыться с уже имеющимся контентом
	if ($("#"+b).children().hide()){
		$("#"+b).css("height", "0px");
		$("#"+b).css("overflow", "auto");
		$("#"+b).animate({height: $("#"+b)[0].scrollHeight}, 500,function(){
				$("#"+b).children().show()
			})
		return;
	}

//Тут див открывается, подгружая контент
	$("#"+b).css("height", "0px");
	$("#"+b).css("overflow", "auto");
	$("#"+b).html("Загрузка...");
	$("#"+b).children().show();
	$.ajax({
		type: "POST",
		url: "doit.php",
		data: "id="+a, 
		success: function(msg){
			$("#"+b).html(msg);
			$("#"+b).animate({height: $("#"+b)[0].scrollHeight}, 500,function(){
				$("#"+b).children().show()
			})
		}
	});
}

if($(' блок *').length==0){
//...померять количество наявных елементов в блоке
}не подойдет?
или
if($(' блок ').find('*').length==0){...}
...тоже самое

if($(' блок ').find('*:visible').length==0){...}
.. померять количество visible елементов в блоке

[Gosha]

Я попробовал сделать массив, в который записывается состояние для каждого блока

var ar = Array();

Где информация хранится так

'monkey' => '0';
'dog' => '1';

И когда кликаю на слой, читаю по его ключу значение, и если его не существует, то блок закрыт и контент в нем не подгружен. Все это дело подгружается, и создается элемент массива с ключем (id дива) и значением "1". Это значит, что блок расскрыт. При закрытии, значение меняется на "0" - закрыт.

В общем все держится на существовании элемента массива и его значениях. Не знаю, не расточительно ли...

Ваш способ испытал, но он почему-то показывает одинаковые значения количества hide объектов в открытом и закрытом состояниях. Сейчас попробую пофиксить

[Андрей38]

$('#див').show(333)
я 2-й год юзаю только jQ для ДОм и многие понятия мне мало известны.маасив почти не использую так как мало знаком с ним
ВСЕ знает человек по логу KSA , Diablo и еще пару других гуру

[Gosha]

На этом спасибо за помощь. Скрипт получился и работает нормально во всех браузерах