Javascript-форум - Показать сообщение отдельно

Giddeon · #1 (**permalink**) 17.10.2013, 19:20

Здравствуйте, форумчане!
пишу код, который должен сначала по выбору квадрата вытаскивать из низа экрана div, соответствующий этому квадрату, и сжимать поле выбора, а в последствии, при попытки выбрать другой вариант, дивы будут выезжать уже не снизу, а сбоку. Может немного криво объяснил, но уж как смог. Так вот первая часть работает чудно, а вот выезжание сбоку вообще не хочет работать, хотя вроде все там совсем просто

Вот хтмл

<!DOCTYPE html>
<html>
  <head>
    <title>Grace</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <link href="Grace.css" rel="stylesheet" type="text/css" />
	<script type='text/javascript' src='js/Grace.js'></script>
	<script type='text/javascript' src='js/Sliding.js'></script>
  </head>
  <body>
    <div id='header'>
	<h1> Grace </h1>
	<ul>
        <li>Production 
        </li>
        <li>Gallery
        </li>
        <li>About
        </li>
        <li>Contacts
        </li>
      </ul>
	</div>

	<div id='lent'>
	 <div id='first'>
	    <img src='' alt='' />
	 </div>
	 <div id='second'>
	    <img src='' alt='' />
	 </div>
	 <div id='third'>
	    <img src='' alt='' />
	 </div>
	 <div id='forth'>
	    <img src='' alt='' />
	 </div>
	</div>

    <div id='hidden1'></div>
    <div id='hidden2'></div>
    <div id='hidden3'></div>
    <div id='hidden4'></div>	
</body>
</html>

Вот CSS

*{
margin:0;
padding:0;
}

html,
body {
height: 100%;
overflow: hidden;
}

body {
background-color: #FDF5E6;
}

#header {
width: 100%;
height:16%;
background-color: #CC99CC;

}


h1 {
color: silver;
font-size: xx-large;
}

ul {
margin-left: 70%;
}

li {
display: inline-block;
margin-left: 2%;
}

#lent {
width: 70%;
height: 30%;
font-size: 0;
margin-left: 16%;
margin-top: 15%;
}

#first,
#second, 
#third, 
#forth {
height:100%;
width:25%;
display: inline-block;

}

#first {
background-color: blue;
}
#second {
background-color: yellow;
}
#third {
background-color: green;
}
#forth {
background-color:red;
}

#hidden1,
#hidden2,
#hidden3,
#hidden4
 {
width:100%;
height: 79%;
margin-top: 26.5%;
position: absolute;
diplay: none;
}

#hidden1 {
background-color: blue;
}

#hidden2 {
background-color: yellow;
}

#hidden3 {
background-color: green;
}

#hidden4 {
background-color: red;
}

Вот первый JQuery код
$(document).ready(function() {
$('#first').click(function() {
$('#hidden1').show();
setTimeout( function() {
$('#lent').animate({
  width: '100%',
  height: '5%', 
  marginTop: '0%',
  marginLeft: '0%'
  }, 2000);
  }, 750);
  $('#hidden1').animate({
  marginTop: '0%'
  }, 1000);
  $('#hidden1').addClass('selected');
  $('#lent').addClass('compressed');
 });
 
 $('#second').click(function() {
 if($('#lent').hasClass('compressed')) {}
 else {
 $('#hidden1').css('margin-left', '100%');
  $('#hidden1').css('margin-top', '0%');
 $('#hidden2').show();
setTimeout( function() {
$('#lent').animate({
  width: '100%',
  height: '5%', 
  marginTop: '0%',
  marginLeft: '0%'
  }, 2000);
  }, 750);
  $('#hidden2').animate({
  marginTop: '0%'
  }, 1000);
  $('#hidden2').addClass('selected');
  $('#lent').addClass('compressed');
  }
 });
 
 $('#third').click(function() {
 if($('#lent').hasClass('compressed')) {}
 else {
 $('#hidden3').show();
setTimeout( function() {
$('#lent').animate({
  width: '100%',
  height: '5%', 
  marginTop: '0%',
  marginLeft: '0%'
  }, 2000);
  }, 750);
  $('#hidden3').animate({
  marginTop: '0%'
  }, 1000);
  $('#hidden3').addClass('selected');
  $('#lent').addClass('compressed');
  }
 });
 
 $('#forth').click(function() {
  if($('#lent').hasClass('compressed')) {}
  else{
 $('#hidden4').show();
setTimeout( function() {
$('#lent').animate({
  width: '100%',
  height: '5%', 
  marginTop: '0%',
  marginLeft: '0%'
  }, 2000);
  }, 750);
  $('#hidden4').animate({
  marginTop: '0%'
  }, 1000);
  $('#hidden4').addClass('selected');
    $('#lent').addClass('compressed');
	}
 });
 
});

Вот второй

$(document).ready(function () {
		$('#first').click(function() {
		if($('#lent').hasClass('compressed')) {
			if($('#hidden1').hasClass('selected')) {}
			else {
				('#hidden1').show();
				$('.selected').animate({
				marginRight: '100%'
				}, 1000);
				$('#hidden1').animate({
				marginLeft: '0%'
				}, 1000);
				$('.selected').css('margin-left', '100%');
				}
			}
		});
});