Плавный переход между блоками
В общем есть такой код, целью которого является плавно показать один див и спрятать другой
var links = $('.part a');
links.click(function(){
var indx = $(this).index();
var blocks = $(this).siblings('div');
blocks.animate({
opacity: 0
}).eq(indx).animate({
opacity: 1
});
});
.blockA {
position: absolute;
width: 980px;
height: 600px;
line-height: 150px;
text-align: center;
color: #FFF;
opacity: 1;
}
.blockB {
position: absolute;
width: 980px;
height: 600px;
line-height: 150px;
text-align: center;
color: #FFF;
opacity: 0;
}
.blockA {
background: #060;
}
.blockB {
background: #036;
}
.showA , .showB {
display: inline-block;
padding: 10px;
}
.part {
float: left;
margin-right: 50px;
}
.active {
margin: 0;
z-index: 10;
}
<div class="part">
<a href="#" class="showA">Блок А</a><a href="#" class="showB">Блок Б</a>
<div class="blockA">Блок А</div>
<div class="blockB">Блок Б</div>
</div>
Внимание вопрос. Каким образом нужно переделать скрипт, чтобы можно было перелистывать из самих блоков? Ну т.е. чтобы можно было перейти только на соседний блок. Если сильно не затруднит, хотелось бы пример. Да, еще хотел бы организовать перелистывание, т.е. текущий блок уплывает влево, а на его месте возникает или приплывает справа следующий. |
misterX_,
:-?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.blockA {
position: absolute;
width: 980px;
height: 600px;
line-height: 150px;
text-align: center;
color: #FFF;
opacity: 1;
left: 0px;
}
.blockB {
left: -980px;
position: absolute;
width: 980px;
height: 600px;
line-height: 150px;
text-align: center;
color: #FFF;
opacity: 1;
overflow: hidden;
}
.blockA {
background: #060;
}
.blockB {
background: #036;
}
.showA , .showB {
display: inline-block;
padding: 10px;
}
.part {
float: left;
margin-right: 50px;
position: relative;
width: 980px;
height: 600px;
overflow: hidden;
}
.active {
margin: 0;
z-index: 10;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function()
{
var blocks = $('.part div');
blocks.click(function()
{
blocks.stop().not(this).css({left: '-980px'}).animate(
{
left: '0px'
},2000
)
$(this).animate(
{
left: '980px'
},2000
);
}
);
}
);
</script>
</head>
<body>
<div class="part">
<div class="blockA">Блок А</div>
<div class="blockB">Блок Б</div>
</div>
</body>
</html>
|
Спасибо за ответ. Я не совсем верно сформулировал вопрос. Будут две ссылки типа вперед и назад и пять блоков (на них, соответственно, по две этих ссылки - ну кроме первого и последнего), между которыми можно будет перемещаться нажимая на эти ссылки. Если нажимаем Вперед, то следующий блок приплывает справа, если Назад, то предыдущий блок приплывает слева.
Можно какой-нибудь пример в этом роде? Насколько я понял, нужно определять номер текущего элемента (открытого блока), далее если нажато Назад, то текущий номер -1 и отобразить предыдущий блок, если нажато Далее то +1 и отобразить следующий блок. И так, соответственно, в рамках длинны массива элементов div блока part. Кстати, в примере выше почему-то блоки прижаты к левому краю экрана, или их надо обернуть в дополнительный див со свойством absolute? |
misterX_,
1. слайдеров очень много, поищите с нужными вам функциями. 2. |
Подскажите пожалуйста хотя бы как определить номер текущего открытого блока div?
|
Цитата:
|
А, понял. А потом в замыкание куда-то записывать текущий при переходе, правильно?
Кстати, в IE8 он отображает почему-то последний. |
misterX_,
http://javascript.ru/forum/jquery/51...tml#post337283 почти готовое решение - добавить только ксс-эффекты |
Спасибо :)
Не совсем то, но пища для размышлений теперь есть. Кстати, в IE8 не работает. Видимо, не понимает вот эту конструкцию nth-child(). |
Все написал сам.
Плюс нашел интересный плагин, называется formToWizard. Очень легкий, тоже неплохо решает мои вопросы. Сейчас его только разберу, выкину все ненужное и все... :victory: |
| Часовой пояс GMT +3, время: 12:01. |