Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.09.2015, 22:37
Аватар для Globus
Аспирант
Отправить личное сообщение для Globus Посмотреть профиль Найти все сообщения от Globus
 
Регистрация: 04.03.2014
Сообщений: 76

Изменение размера блока по нажатию кнопки
У меня есть две кнопки, при нажатии на одну блок увеличивается, на вторую - уменьшается.

Подскажите, пожалуйста, как можно объединить эти две функции и повесить на одну кнопку,чтобы при нажатии первый раз увеличивался блок,а второй раз - уменьшался. Заранее спасибо!

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#start").click(function(){  
    
    $("div").animate({
      
      height:'100%', 
      width:'100%'
      
      
       
    });
  });
 
  $("#stop").click(function(){
    $("div").animate({
       
      height:'284px',
      width:'100%'
      

    });
  });
});
</script>  
</head>
 
<body>
<button id="start">Start Animation</button>
<button id="stop">Stop Animation</button>
<div style="background:#98bf21;height:284px;width:100%;position:absolute;"> 

</div>

</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 19.09.2015, 00:38
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    html, body {
      height: 100%;
    }
    
    body {
      margin: 0;
    }
    
    div {
      width: 100%;
      height: 284px;
      background: orange;
      position: absolute;
    }
  </style>
</head>
<body>
  <button>Жми</button>
  <div></div>


  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script>
    var div = $('div'), baseHeight = div.height();

    $('button').click(function() {
      div.animate({
        height: (div.height() == baseHeight ? '100%' : baseHeight)
      });
    });
  </script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 19.09.2015, 12:16
Аватар для Globus
Аспирант
Отправить личное сообщение для Globus Посмотреть профиль Найти все сообщения от Globus
 
Регистрация: 04.03.2014
Сообщений: 76

Благодарю! Про baseHeight не подумал даже
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Пропорциональное изменение размера div блока NiGiLiSt jQuery 2 01.11.2013 15:39
изменение размера кнопки student2011 Общие вопросы Javascript 6 09.01.2011 20:14
изменение размера блока dimiork Элементы интерфейса 1 08.01.2011 21:01
плавное изменение размера блока alexk984 jQuery 4 29.11.2010 08:46
Изменение размера блока реклама в зависимости от разрешения экрана. toxiz77 Общие вопросы Javascript 3 11.02.2009 14:12