Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Плавный переход между блоками (https://javascript.ru/forum/events/51120-plavnyjj-perekhod-mezhdu-blokami.html)

misterX_ 24.10.2014 14:37

Плавный переход между блоками
 
В общем есть такой код, целью которого является плавно показать один див и спрятать другой
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>


Внимание вопрос. Каким образом нужно переделать скрипт, чтобы можно было перелистывать из самих блоков?
Ну т.е. чтобы можно было перейти только на соседний блок.

Если сильно не затруднит, хотелось бы пример.

Да, еще хотел бы организовать перелистывание, т.е. текущий блок уплывает влево, а на его месте возникает или приплывает справа следующий.

рони 25.10.2014 18:38

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>

misterX_ 27.10.2014 07:54

Спасибо за ответ. Я не совсем верно сформулировал вопрос. Будут две ссылки типа вперед и назад и пять блоков (на них, соответственно, по две этих ссылки - ну кроме первого и последнего), между которыми можно будет перемещаться нажимая на эти ссылки. Если нажимаем Вперед, то следующий блок приплывает справа, если Назад, то предыдущий блок приплывает слева.
Можно какой-нибудь пример в этом роде?

Насколько я понял, нужно определять номер текущего элемента (открытого блока), далее если нажато Назад, то текущий номер -1 и отобразить предыдущий блок, если нажато Далее то +1 и отобразить следующий блок. И так, соответственно, в рамках длинны массива элементов div блока part.
Кстати, в примере выше почему-то блоки прижаты к левому краю экрана, или их надо обернуть в дополнительный див со свойством absolute?

рони 27.10.2014 08:12

misterX_,
1. слайдеров очень много, поищите с нужными вам функциями.
2. то что сейчас сформулировали, неосилил,(уже понятнее но) да и тема уже неинтересна, приложите свои усилия или в раздел работа.

misterX_ 27.10.2014 08:13

Подскажите пожалуйста хотя бы как определить номер текущего открытого блока div?

ksa 27.10.2014 08:17

Цитата:

Сообщение от misterX_
Подскажите пожалуйста хотя бы как определить номер текущего открытого блока div?

Он, как правило, первый...

misterX_ 27.10.2014 08:19

А, понял. А потом в замыкание куда-то записывать текущий при переходе, правильно?
Кстати, в IE8 он отображает почему-то последний.

рони 27.10.2014 08:24

misterX_,
http://javascript.ru/forum/jquery/51...tml#post337283
почти готовое решение - добавить только ксс-эффекты

misterX_ 27.10.2014 08:39

Спасибо :)
Не совсем то, но пища для размышлений теперь есть.
Кстати, в IE8 не работает. Видимо, не понимает вот эту конструкцию nth-child().

misterX_ 27.10.2014 10:01

Все написал сам.
Плюс нашел интересный плагин, называется formToWizard. Очень легкий, тоже неплохо решает мои вопросы. Сейчас его только разберу, выкину все ненужное и все...
:victory:


Часовой пояс GMT +3, время: 04:02.