Показать сообщение отдельно
  #2 (permalink)  
Старый 25.10.2014, 19:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

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>
Ответить с цитированием