Javascript-форум - не работает вызов функции после .animate

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - не работает вызов функции после .animate (https://javascript.ru/forum/jquery/42543-ne-rabotaet-vyzov-funkcii-posle-animate.html)

не работает вызов функции после .animate

собственно, после выполнения функции .animate блок должен с помощью .css перемещаться за правую половину экрана, однако этого не происходит, помогите.

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

Giddeon,
где html ?

рони

<!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>

*{
margin:0;
padding:0;
}

html,
body {
height: 100%;
}

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;

}

#hidden1 {
background-color: blue;
}

#hidden2 {
background-color: yellow;
}

#hidden3 {
background-color: green;
}

#hidden4 {
background-color: red;
}

Giddeon,
зачем плодить темы и что такое рабочий макет я вам показывал тут там же решение вашей проблемы -- блоки уходят влево - жать также - жёлтое потом синее .

рони,
нет, проблема в том, что вызов функции перемещения с помощью ксс, который я делаю после функции анимейт не работает, хотя синтаксис весь правильный, я не понимаю, в чем дело =\

Giddeon,
покажите ваш код и чем вас мой вариант неустроил?