Jquery - анимация высоты - PullRequest
Новая
       56

Jquery - анимация высоты

37 голосов
/ 11 февраля 2011

У меня есть полоса 10px в верхней части экрана, которая, при нажатии, я хочу, чтобы она анимировалась на высоту 40px, а затем при повторном нажатии снова анимируется до 10px. Я попытался изменить идентификатор div, но он не работает. Как я мог заставить это работать, или есть лучший способ сделать это?

body html:

<div id="topbar-show"></div>

CSS: 

#topbar-show { width: 100%; height: 10px; background-color: #000; }
#topbar-hide { width: 100%; height: 40px; background-color: #000; }

JavaScript: 

$(document).ready(function(){
  $("#topbar-show").click(function(){
    $(this).animate({height:40},200).attr('id', 'topbar-hide');
  });
  $("#topbar-hide").click(function(){
    $(this).animate({height:10},200).attr('id', 'topbar-show');
  });
});

Ответы [ 9 ]

55 голосов
/ 11 февраля 2011

Попробуйте: 

$(document).ready(function(){
  $("#topbar-show").toggle(function(){
    $(this).animate({height:40},200);
  },function(){
    $(this).animate({height:10},200);
  });
});
16 голосов
/ 11 февраля 2011

Вы должны использовать class, чтобы достичь того, что вы хотите:

css: 

#topbar { width: 100%; height: 40px; background-color: #000; }
#topbar.hide { height: 10px; }

javascript: 

  $(document).ready(function(){
    $("#topbar").click(function(){
      if($(this).hasClass('hide')) {
        $(this).animate({height:40},200).removeClass('hide');
      } else { 
        $(this).animate({height:10},200).addClass('hide');
      }
    });
  });
16 голосов
/ 11 февраля 2011

Вы можете использовать метод toggle-event (документы) для назначения 2 (или более) обработчиков, которые переключаются при каждом нажатии.

Пример: http://jsfiddle.net/SQHQ2/1/

$("#topbar").toggle(function(){
    $(this).animate({height:40},200);
},function(){
    $(this).animate({height:10},200);
});

или вы можете создать собственное поведение переключения:

Пример: http://jsfiddle.net/SQHQ2/

$("#topbar").click((function() {
    var i = 0;
    return function(){
        $(this).animate({height:(++i % 2) ? 40 : 10},200);
    }
})());
3 голосов
/ 16 ноября 2013

Очень поздно, но я прошу прощения. Извините, если это неэффективно, но если вы обнаружили, что все вышеперечисленное не работает, попробуйте это. Работает для выше 1.10 также 

<script>
  $(document).ready(function() {
    var position='expanded';

    $("#topbar").click(function() {
      if (position=='expanded') {
        $(this).animate({height:'200px'});
        position='collapsed';
      } else {
        $(this).animate({height:'400px'});
        position='expanded';
      }
    });
   });
</script>
1 голос
/ 25 сентября 2015

Приведенный ниже код работал для меня в jQuery2.1.3 

$("#topbar").animate('{height:"toggle"}');

Не нужно вычислять высоту div, отступы, поля и границы.Это позаботится.

1 голос
/ 07 июня 2013

Вы также можете использовать этот трюк: заменить 

$("#topbar").click(function(){

от 

$(document).on("click", "#topbar", function(){

Это связывает событие с еще не загруженным объектом ... ;)

1 голос
/ 11 февраля 2011

Я просто подумал, чтобы объяснить вам причину, по которой ваше решение не сработало:

Когда $(document).ready() выполняется, только селектор $('#topbar-show') может найти соответствующий элемент из DOM. Элемент #topbar-show еще не создан.

Чтобы обойти эту проблему, вы можете использовать привязки событий в реальном времени 

$('#topbar-show').live('click',function(e){});
$('#topbar-hide').live('click',function(e){});

Это самый простой способ исправить ваше решение. Остальная часть этих ответов идет дальше, чтобы предоставить вам лучшие решения, которые не изменяют атрибут надежного постоянного идентификатора.

1 голос
/ 11 февраля 2011

Это было бы возможно: 

$(document).ready(function(){
  $("#topbar").toggle(function(){
    $(this).animate({height:40},200);
  }, 
  function(){
    $(this).animate({height:10},200);
  });
});
#topbar {
  width: 100%;
  height: 10px;
  background-color: #000;
  color: #FFF;
  cursor: pointer;
}
<!DOCTYPE html>
    <html>
    <head>
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    </head>
    <body>
      <div id="topbar"> example </div>
    </body>
    </html>
0 голосов
/ 31 января 2017

работал для меня: 

$(".filter-mobile").click(function() {
   if ($("#menuProdutos").height() > 0) {
      $("#menuProdutos").animate({
         height: 0
      }, 200);
   } else {
      $("#menuProdutos").animate({
         height: 500
      }, 200);
   }
});
...