Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   slideToggle от jQuery смещает внутренний блок (https://javascript.ru/forum/jquery/22795-slidetoggle-ot-jquery-smeshhaet-vnutrennijj-blok.html)

Madd123 01.11.2011 02:05

slideToggle от jQuery смещает внутренний блок
 
Здравствуйте.

Прошу помощи :cray: Проковырялся целый день, так и не понял, почему так получается...

В чем суть, набросал скрипт, который выдвигает\задвигает блок при нажатии на определенный див и сохраняет в куках положение, все это, на удивление, работает как часы во всех браузерах, проблемы начались чуть позже, когда я добавил в тот блок, что мы прячем еще 1 подблок, для наглядности выделю его жирным:
<div id="fastnews">
	[B]<div class="fscont">
		ffffffffffffffffff
	</div>[/B]
</div>

Собственно, fastnews - Блок, который скрывается через slideToggle, а fscont - его внутренний блок.

Суть проблемы:
Блок fscont держит должное положение только тогда, когда происходит движение (скрытие\открытие), как только блок "доехал", внутренний блок смещается вправо по каким-то причинам.

вот, пока едет: http://s55.radikal.ru/i148/1110/1a/8a86820df0b4.jpg (fffffffffffffff на месте).

Приехал: http://s017.radikal.ru/i432/1110/c7/f699d7001111.jpg (fffffffffffff смещен влево).

Совершенно не могу понять, почему так, привожу код скрытия\открытия:
$(document).ready(function(){
/* Start DocumentReady */
var ff = $('div#fastnews div.fscont');
if($.cookie("hided")){
	$('div#fastnews').hide();
	$('div.hidetext').toggleClass('unhidetext');
	$('div.hidebutt').toggleClass('unhidebutt');
}

$("div#hide").click(function(){
	$('div#fastnews').slideToggle('fast');
	$('div.hidetext').toggleClass('unhidetext');
	$('div.hidebutt').toggleClass('unhidebutt');
	
	if ($.cookie("hided")) {
		$.cookie("hided", null);
	}else {
		$.cookie("hided", "close");
	}

	return false;
});
/* End DocumentReady */
});


HTML уже приводил выше, div#hide представляет из себя div, при нажатии на который происходит скрытие\открытие указанного блока.

а вот CSS:
#hide {position: relative; width: 100%; height: 27px; background: url(../mmoimg/hidebg1.jpg) repeat-x;cursor:pointer;}
#hide .controls {position: relative; width:266px; height:27px; margin: 0 auto; padding:0px;}
#hide .controls .hidebutt {width:29px; height:27px; background: url(../mmoimg/butt/hide_up.png) no-repeat;float:left;}
#hide .controls .unhidebutt {width:29px; height:27px; background: url(../mmoimg/butt/hide_down.png) no-repeat;float:left;}
#hide .controls .hidetext {width:210px; height:27px; background: url(../mmoimg/hidetext.png) no-repeat;float:left;margin-top:2px;}
#hide .controls .unhidetext {width:210px; height: 27px; background: url(../mmoimg/unhidetext.png) no-repeat;float:left;margin-top:2px;}

#fastnews {position: relative; width:100%; height:275px; background: url(../mmoimg/fastnewsbg.jpg) repeat-x;margin: 0 auto;}
#fastnews .fscont {position: relative;width:1024px; height:275px;margin:0 auto; padding:0px;}


Уже просто не знаю, что делать.. Надеюсь поможете, спасибо большое.


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