Показать сообщение отдельно
  #15 (permalink)  
Старый 30.03.2012, 12:02
Аватар для T-sh
Профессор
Отправить личное сообщение для T-sh Посмотреть профиль Найти все сообщения от T-sh
 
Регистрация: 04.12.2009
Сообщений: 579

что-то ты намудрил

высота у слайдов должна быть одинаковая, это никак не обойти.

вот, накидал на скорую руку, возможны косяки, но принцип тот же

css:
<style type="text/css">
#acc{
display: block;
position: relative;
width: 960px;
height: 100%;
min-height: 800px !important;
margin: 0 auto;
overflow: hidden;
}
.slide{
display: block;
position: absolute;
width: 960px;
height: 800px; 
float: left;
}
.miniText{
position: relative;
height: auto;
width: 220px;
}
.maxiText{
position: relative;
height: auto;
width: 100%;
display: none;
}
</style>


jquery:
var thisIndex,
	thisMargin;
$(document).ready(function(){
	$("body").click(function(){
	
	});
	
	$(".slide").data("open", false);
	
	$(".slide").click(function(){
	thisIndex = $(this).index();
	if (!($(this).data("open"))){
		$(this).data("thisMargin", $(this).css("marginLeft"));
		$(this).find(".miniText").hide();
		$(this).find(".maxiText").show("slow");
		$(this).animate({"marginLeft": 0}, 1000);
		$(".slide").data("open", true);
		
		$(".slide").each(function(){
   			 var slide = $(this);
			 slide.data("defaultML", slide.css("marginLeft"));
			 if (slide.index() < thisIndex ){
			  slide.animate({"marginLeft": 0}, 1000);
			 }
			 if (slide.index() > thisIndex ){
			  slide.animate({"marginLeft": 960}, 1000);
			 }
		});
	
	}
	else {
		$(this).find(".miniText").show("slow");
		$(this).find(".maxiText").hide();
		$(this).animate({"marginLeft": $(this).data("thisMargin")}, 1000);
		$(".slide").data("open", false);
		
		$(".slide").each(function(){
   			 var slide = $(this);
			 if (slide.index() < thisIndex ){
			  slide.animate({"marginLeft":  slide.data("defaultML") }, 1000);
			 }
			 if (slide.index() > thisIndex ){
			  slide.animate({"marginLeft":  slide.data("defaultML") }, 1000);
			 }
		});
			
	}
	
	});
});


<div id="acc">
	<div class="slide" style="background-color: red; ">
		<p class="miniText"> Текст закрытого блока 1</p>
		<p class="maxiText"> Текст открытого блока 1<br>Текст открытого блока 1<br>Текст открытого блока 1<br>Текст открытого блока 1</p>
	</div>
	<div class="slide" style="background-color: green; margin-left: 220px;">
		<p class="miniText"> Текст закрытого блока 2 </p>
		<p class="maxiText"> Текст открытого блока 2<br>Текст открытого блока 2<br>Текст открытого блока 2<br>Текст открытого блока 2</p>
	</div>
	<div class="slide" style="background-color: blue; margin-left: 440px;">
		<p class="miniText"> Текст закрытого блока 3 </p>
		<p class="maxiText"> Текст открытого блока 3<br>Текст открытого блока 3<br>Текст открытого блока 3<br>Текст открытого блока 3</p>
	</div>
	<div class="slide" style="background-color: orange; margin-left: 680px;">
		<p class="miniText"> Текст закрытого блока 4 </p>
		<p class="maxiText"> Текст открытого блока 4<br>Текст открытого блока 4<br>Текст открытого блока 4<br>Текст открытого блока 4</p>
	</div>
</div>
__________________
С моих слов записано верно.
Ответить с цитированием