При загрузке страницы, генерируется viewer, список элементов c классом
content_item . Мне надо показать на странице только первые пять элементов, поэтому я присваю им класс
active , а остальным элементам присваеватся css-свойство
display: none; . С помощью навигации я присваю/удаляю класс
active элементам viewer и таким
образом пользователь может просматривать остальные элементы.
И вот тут начинается мой вопрос: как мне сделать так что бы элементы плавно уплывали в сторону, а остальные "паровозиком" тянулись за ним, до тех пор пока не покажутся (встанут в центре) все элементы с классом
active ?
Я понимаю как анимировать сам элемент и задать ему так называемое "движение", но как при этом он должен изчезать при приближение к границе wrapper-а (указан жёлтой границей)? Ширина wrapper-а не должна же меняться.
Я не прошу писать за меня скрипт - я просто спрошиваю технологию. Куда копать мне копать?
<html>
<head>
<title>Views</title>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<style>
.content {
width: 300px;
outline: 2px yellow solid;
overflow: hidden;
padding: 3px;
}
.content_item {
float: left;
width: 100px;
text-align: center;
display: none;
}
.content_item.active {
display: inline-block;
outline: 1px red solid;
}
ul {
list-style: none;
}
li {
outline: 1px blue solid;
float: left;
height: 20px;
width: 20px;
text-align: center;
margin: 5px;
cursor: pointer;
}
.row.active {
background-color: gray;
}
</style>
<div class="content">
<div class="content_item content_item_0 active">1</div>
<div class="content_item content_item_1 active">2</div>
<div class="content_item content_item_2 active">3</div>
<div class="content_item content_item_3 ">4</div>
<div class="content_item content_item_4">5</div>
<div class="content_item content_item_5">6</div>
<div class="content_item content_item_6">7</div>
<div class="content_item content_item_7">8</div>
<div class="content_item content_item_8">9</div>
</div>
<div class="nav">
<ul>
<li class="row row_1 active">0</li>
<li class="row row_2">1</li>
<li class="row row_3">2</li>
</ul>
</div>
<script>
$( document ).ready(function() {
var i_row_total_items = 3;
$('.row').click(function(){
var i_active_value = parseInt($(this).text());
$('.nav .row').each(function(i){
$(this).removeClass("active");
if(i === i_active_value){
$(this).addClass("active");
}
});
$('.content_item').each(function(i){
$(this).removeClass("active");
if( (i >= i_row_total_items * i_active_value) && (i < i_row_total_items * (i_active_value+1) ) ){
$(this).addClass("active");
}
});
});
});
</script>
</body>
</html>