Фридрих,
лучше копать в сторону .each() но можно и без него ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: #000;
}
.master{
width: 800px;
height: 700px;
position: relative;
margin:0 auto;
}
.view{
width: 800px;
height: 600px;
position: absolute;
bottom: 0px;
overflow: hidden;
}
.box{
width: 800px;
height: 600px;
position: absolute;
left: 800px;
bottom: 600px;
}
.button{
width: 100px;
height: 40px;
position: relative;
top: 0px;
cursor: pointer;
border: 1px solid #fff;
margin:5px;
float: left;
}
</style>
<script>
$(function()
{
var t = 600, buttons = $('.button'), boxs = $('.box');
buttons.click(function(){
var i = buttons.index(this),
box = boxs.eq(i);
boxs.stop(true,true);
box.animate({left: '0px', bottom:'0px'}, t,
function () {
boxs.not(box).css({left:'800px', bottom:'600px', zIndex:'10'});
box.css({zIndex:'5'});
});
});
});
</script>
</head>
<body>
<div class='master'> <!-- контейнер -->
<div class='button' id='but1'>1</div>
<div class='button' id='but2'>2</div>
<div class='button' id='but3'>3</div>
<div class='view'> <!-- видимая область -->
<div class='box' id='box1'><img src='http://javascript.ru/forum/images/smilies/victory.gif'></div>
<div class='box' id='box2'><img src='http://javascript.ru/forum/images/smilies/dance3.gif'></div>
<div class='box' id='box3'><img src='http://javascript.ru/forum/images/smilies/cray.gif'></div>
</div>
</div>
</body>
</html>